#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    NY
    Posts
    2
    Rep Power
    0

    Hide/Show text using CSS


    I am very new to css. I am trying to show and hide text by clicking a button. My intention is to use this in a threaded discussion board.
    For example
    I'd like the topics to be displyed when the page loads
    1) topic 1 (Open/Close)
    2) topic 2 (Open/Close)

    On hitting the Open button this would be something like this:

    1) topic 1 (Open/Close)
    ---message 1
    ---message 2
    ---message 3
    ---message 4

    2) topic 2 (Open/Close)

    Hope someone can suggest me an answer or point me to one.

    Thanks
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2003
    Posts
    288
    Rep Power
    12
    You can't just use CSS to do this alone, but controlling CSS with javascript you can.

    Use the display property of css - none removes it from the document flow altogether, block makes it appear in a block (standard display for divs, tables, h tags etc.)

    So you could have

    <div id="topic1" style="display: none;">
    TEXT
    TEXT
    </div>

    And a little javascript function which does this

    function showDiv() {
    document.getElementById('topic1').style.display = String ('block');
    }

    You should be able to ammend that to your needs.

    -D
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jan 2004
    Location
    NY
    Posts
    2
    Rep Power
    0

    Thank you


    Don't remeber if I thanked you for ths. But it worked out perfectly for me. Thank you for taking the time to help out.

    Maneesha
  6. #4
  7. Thanks Johnny Hart (BC) R.I.P.

    Join Date
    May 2003
    Location
    Dallas
    Posts
    5,268
    Rep Power
    1955
    Here's an example using CSS. The code will degrade gracefully for non-graphic UAs such as Lynx or assistive technology for the handicapped.

    cheers,

    gary
    There are those who manage to build a web site without knowing what they're doing; thereby proving to themselves they do, indeed, know what they're doing.

    My html and css workshop, demos and tutorials.
    Ask a better question, get a better answer.

IMN logo majestic logo threadwatch logo seochat tools logo