www.webdeveloper.com
Results 1 to 5 of 5

Thread: CSS add text onclick?

  1. #1
    Join Date
    Aug 2007
    Posts
    9

    CSS add text onclick?

    Hi,

    I want to have a page with a few headings and then when clicked displays text underneath the applicable heading.

    I would prefer to do this with CSS if possible as I am interested in using it in a newsletter later on also.

    Thanks,

    Jim

  2. #2
    Join Date
    Dec 2005
    Location
    American, living in Toronto, ON. CANADA
    Posts
    6,746
    Short of making the HEADER be a link and stuffing the link with "<span></span>" text, hiding it and revealing it on hover or on click with the appropriate pseudo-class, this sounds more like a javascript thing.

    Here is what I mean:

    http://www.dynamicdrive.com/dynamici...tchcontent.htm
    I build for: Firefox and tweak for IE

  3. #3
    Join Date
    Aug 2007
    Posts
    9
    Thanks, that is exactly what I am looking for but also I was looking at something that only used CSS as I may need to use this or something similar in an email newsletter.

    I will have a look at combining <span> and onclick, I am using a span and hover combination already, I wanted to have the text appear as if it was a paragraph below, would this be using positioning in css?

    I tried looking something like that up before, however there were no examples I could easily find, I will muster something up that will hopefully work.

    Otherwise I will use Javascript

  4. #4
    Join Date
    Mar 2006
    Location
    Newcastle NSW Australia
    Posts
    4,033
    Something like this may be want you want.

  5. #5
    Join Date
    Jan 2007
    Location
    Here
    Posts
    58
    This is completely untested, but who knows? It may work:

    <div id="content">
    <h2>Header</h2>
    <div id="hidden_content">Content</div>
    </div>

    The CSS:

    #content div#hidden_content{
    display:none;}
    #content h2:hover div#hidden_content{
    display: block;}

    It's based on http://meyerweb.com/eric/css/edge/popups/demo.html

    If it works at all you will probably have some browser issues as its hardly standard practice to apply pseudo-classes to h2s/divs!

    If it does work, please let me know! (If it doesn't let me know what you find works...)

    Huckle

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles