Hi all,
I have a series of divs in 2 blocks say BLOCK1 and BLOCK2 and I want to
use one click to expand/collapse all those in each block. But the code
I came up with exapands all the divs in the entire page. How do I
restrict it to each block and also how do I cllapse those in each block
and change the text to Collapse All. I am stumped here.
Any help really really appreciated. Here is my code.
Thanks,
Sam
<html>
<head>
<script>
function expand_collapse ()
{
var allDivs;
if (document.getEl ementsByTagName )
{ allDivs = document.getEle mentsByTagName( 'div'); }
else if (document.all)
{ allDivs = document.body.a ll.tags('div'); }
if (allDivs)
{
for (var x=0; x<allDivs.lengt h; x++)
{ allDivs[x].style.display = 'block'; }
}
}
</script>
</head>
<body>
<div id="header" style="width: 550px; margin: auto;">
<div id="main1" style="border: 1px solid #ccc; padding: 10px;">
<b></b>BLOCK 1 </b>
<div style="text-align:right;">< a
href="javascrip t:expand_collap se();">Expand All</a></div>
<div class="title">
<h4> title 1</h4>
</div>
<div style="display: none; border: 1px solid #CCC; padding: 20px;">
TEST TEST TEST TESt
</div>
<div class="title">
<h4> title 2</h4>
</div>
<div style="display: none; border: 1px solid #CCC; padding: 20px;">
TEST TEST TEST TESt
</div>
</div>
<br />
<div id="main2" style="border: 1px solid #ccc; padding: 10px;">
<b>BLOCK 2</b>
<div style="text-align:right;">< a
href="javascrip t:expand_collap se();">Expand All</a></div>
<div class="title">
<h4> title 1</h4>
</div>
<div style="display: none; border: 1px solid #CCC; padding: 20px;">
TEST TEST TEST TESt
</div>
<div class="title">
<h4> title 2</h4>
</div>
<div style="display: none; border: 1px solid #CCC; padding: 20px;">
TEST TEST TEST TESt
</div>
</div>
</div>
</body>
</html>
