sam wrote:
[color=blue]
> 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.getElementsByTagName)
> { allDivs = document.getElementsByTagName('div'); }
> else if (document.all)
> { allDivs = document.body.all.tags('div'); }
> if (allDivs)
> {
> for (var x=0; x<allDivs.length; 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="javascript
:expand_collapse();">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="javascript
:expand_collapse();">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>[/color]
Hi,
I think you can approach this a lot easier:
<span onClick="showHide('block','main1*main23*main27')"> Show</a>
<span onClick="showHide('none','main1*main23*main27')">H ide</a>
<div id="main1">I am main1</div>
<div id="main2">I am main2</div>
.....
<div id="main23">I am main23</div>
<div id="main27">I am main27</div>
<div id="main28">I am main28</div>
<script type="text/javascript">
function showHide(theDisplay,divsStr){
// get all div's
var theDivArr = divStr.split("*");
for(var i=0;i<theDivArr.length;i++){
document.getElementById(theDivArr[i]).style.display=theDisplay;
}
}
</script>
(Not tested.)
Regards,
Erwin Moller
