By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
459,203 Members | 1,638 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 459,203 IT Pros & Developers. It's quick & easy.

Expand/collapse blocks of divs in a page

P: n/a
sam
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>

May 22 '06 #1
Share this Question
Share on Google+
2 Replies


P: n/a
sam wrote:
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>

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
May 22 '06 #2

P: n/a

sam wrote:
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.


Why not just do one of the following:
Use a naming convention, so that each block, and the subdivs can be
determined, so block a may have an id: blocka, and then just append a
number for each subdiv, so you have blocka1, blocka2, ..., blockan

Then, you can just open and close them as needed.

Or, if each div is the immediate child of the block div, then just get
all the childnodes for the block div, and open/close those.

May 22 '06 #3

This discussion thread is closed

Replies have been disabled for this discussion.