expand and collapse sections of page... help

**emjaetee** · 03-26-2007 08:02 AM

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.

**Mr J** · 03-26-2007 09:54 AM

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>

**emjaetee** · 03-26-2007 08:57 PM

perfect! thank you very much.

**shafiq.anderson** · 07-30-2012 04:29 AM

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: expand and collapse sections of page... help

Thread Tools

Display

expand and collapse sections of page... help

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions