Expand/collapse blocks of divs in a page

S

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>
 
E

Erwin Moller

sam said:
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>
Click to expand...


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')">Hide</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).style.display=theDisplay;
}
}
</script>

(Not tested.)

Regards,
Erwin Moller
 
J

James Black

sam said:
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.
Click to expand...

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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

How do I fix this issue in sqaurespace code block? 1
Having trouble centering contents of td ? 3
Image shifts to the right when export the page to pdf 4
Is it possible an iframe can overlapp another? 3
Working on mobile css menu with plenty of frustration! 2
Help with my responsive home page 2
Need help , Having problem with Drag n Drop... 1
I need help making a zooming function 11

Members online

No members online now.
Total: 64 (members: 0, guests: 64)
Robots: 518

Forum statistics

Threads
473,989
Messages
2,570,207
Members
46,782
Latest member
ThomasGex

Latest Threads

Top