SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Guru
    Join Date
    Aug 2004
    Location
    Canada
    Posts
    730
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    expanding and collapsing

    Is there a way to expand and collapse in JavaScript? What's the best way?
    Compare bible texts (and other tools):
    TheWheelofGod

  2. #2
    SitePoint Evangelist
    Join Date
    Jul 2007
    Posts
    345
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can collapse an element by setting its CSS display property to 'none'.
    Setting the property to '' (empty string) expands it back to its previous state.

    html:

    <p onclick="expand();">Toggle</p>
    <p id="expando">Now you see me...</p>

    javascript:

    function expand() {
    var tog = document.getElementById("expando");
    if (tog.style.display = "none")
    tog.style.display = "";
    else
    tog.style.display = "none";
    }


    The Toggle paragraph could be replaced by a button.

    Rather than using style.display you could change the element's CSS class to a class that has display:none set.

    javascript:
    tog.className = "hidden";

    CSS:
    .hidden{display:none;}


Bookmarks

Posting Permissions

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