www.webdeveloper.com
Results 1 to 2 of 2

Thread: expand collapse content using CSS

  1. #1
    Join Date
    Nov 2011
    Posts
    1

    expand collapse content using CSS

    Hi, I'm new to the forum. I saw one of Ultimator's posts where he gives this code (see bellow) and I was wondering if it could have the three buttons by themselves, and when user clicks a button, the diplayed content appears underneath...

    here's the code Ultimator posted:

    --------------------------------------------
    <script type="text/javascript">
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
    e.style.display="block"
    }
    else{
    e.style.display="none"
    }
    return true;
    }
    </script>

    <input type="button" onclick="return toggleMe('para1')" value="Toggle"><br>
    <p id="para1">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
    </p>
    <br>
    <input type="button" onclick="return toggleMe('para2')" value="Toggle"><br>
    <div id="para2">
    blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</div>
    <br>
    <input type="button" onclick="return toggleMe('para3')" value="Toggle"><br>
    <span id="para3">blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah</span>

    --------------------------------------------


    Thanks a lot

  2. #2
    Join Date
    Jan 2008
    Location
    Florida
    Posts
    1,227
    Use CSS to place the divs and buttons anywhere you like. The JS code only toggles the display.

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