www.webdeveloper.com
Results 1 to 4 of 4

Thread: expand and collapse sections of page... help

  1. #1
    Join Date
    Mar 2007
    Posts
    2

    expand and collapse sections of page... help

    Hello. I'm new here, and I'm new with the coding scene.

    I found this wonderful script somewhere, thank you very much to the developer, but there are 2 buttons I really want to include along with this: One, a button to expand everything and two, a button to collapse everything. Can someone please help?

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title></title>
    <script type="text/javascript">

    function disp(hId){
    if(document.getElementById(hId).attributes.collapse.value == "false"){
    hide(hId);
    return true;
    }
    document.getElementById(hId).style.display="block";
    document.getElementById(hId).attributes.collapse.value=false;
    }

    function hide(hId){
    document.getElementById(hId).style.display="none";
    document.getElementById(hId).attributes.collapse.value=true;
    }
    </script>
    </head>

    <body>
    <div onclick="disp('def1');" id="clsp1" />Click to see definition 1
    <div style="display:none" id="def1" collapse="true">
    <p>This is definition 1-1</p>
    <p>This is definition 1-2</p>
    <p>This is definition 1-3</p>
    </div>
    </div>
    <div onclick="disp('def2');" id="clsp2" />Click to see definition 2
    <div style="display:none" id="def2" collapse="true">
    <p>This is definition 2-1</p>
    <p>This is definition 2-2</p>
    <p>This is definition 2-3</p>
    </div>
    </div>
    </body>
    </html>
    please

    thank you very much.

  2. #2
    Join Date
    Apr 2003
    Location
    UK
    Posts
    2,203
    Give this a try

    Code:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
    <title></title>
    <script type="text/javascript">
    
    function disp(hId){
    if(document.getElementById(hId).attributes.collapse.value == "false"){
    hide(hId);
    return true;
    }
    document.getElementById(hId).style.display="block";
    document.getElementById(hId).attributes.collapse.value=false;
    }
    
    function hide(hId){
    document.getElementById(hId).style.display="none";
    document.getElementById(hId).attributes.collapse.value=true;
    }
    
    function showHideAll(n){
    
    count=1
    while(document.getElementById("def"+count)){
    
    if(n==0){
    document.getElementById("def"+count).style.display="none"
    }
    else{
    document.getElementById("def"+count).style.display="block"
    }
    count++
    }
    
    }
    </script>
    </head>
    
    <body>
    <div onclick="disp('def1');" id="clsp1" />Click to see definition 1
    <div style="display:none" id="def1" collapse="true">
    <p>This is definition 1-1</p>
    <p>This is definition 1-2</p>
    <p>This is definition 1-3</p>
    </div>
    </div>
    <div onclick="disp('def2');" id="clsp2" />Click to see definition 2
    <div style="display:none" id="def2" collapse="true">
    <p>This is definition 2-1</p>
    <p>This is definition 2-2</p>
    <p>This is definition 2-3</p>
    </div>
    </div>
    
    <button onclick="showHideAll(0)">Collapse All</button><button onclick="showHideAll(1)">Show All</button>
    </body>
    </html>
    The Silent One

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is one with an idea

  3. #3
    Join Date
    Mar 2007
    Posts
    2
    perfect! thank you very much.

  4. #4
    Join Date
    Jul 2012
    Posts
    1
    Hi! i have altered this slightly to so that it toggles instead, and with two divs, it works perfectly.

    any suggestions to allow for three?

    My alteration:
    <div class='button' onclick="disp('def1'); hide('def2')" id="clsp1" />Click to see definition 1</div>
    <div class='button' onclick="disp('def2'); hide('def1')" id="clsp2" />Click to see definition 2</div>

    the rest of the code is pretty much the same....

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