PDA

Click to See Complete Forum and Search --> : [RESOLVED] Show/Hide - Expand All/Shrink All

Ivoman
09-26-2007, 07:17 AM
I need a script (showhide.js) that can make the following work:

<html>
<head>
<title>Show/Hide - Expand All/Shrink All</title>
<script type="text/javascript" src="showhide.js" ></script>
</head>
<body>

<p align="center"><a href="javascript:expand_all(27);">Expand All</a> / <a href="javascript:shrink_all(27);">Shrink All</a></p>

<p><a href="javascript:display(cat_1);">Cat_1</a></p>
<div id="cat_1">Show content of Cat_1</div>
<p><a href="javascript:display(cat_2);">Cat_2</a></p>
<div id="cat_2">Show content of Cat_2</div>
<p><a href="javascript:display(cat_...);">Cat_...</a></p>
<div id="cat_...">Show content of Cat_...</div>
<p><a href="javascript:display(cat_27);">Cat_27</a></p>
<div id="cat_27">Show content of Cat_27</div>

</body>
</html>
Notice the '27' and the cat_#
These are generated with php. At this moment there are 27 categories, but they can increase to 28, 29, etc. whenever a category is added.

The javascript:display(cat_1); should show its div when clicked and hide it when clicked again.

The javascript:expand_all(27); should expand cat_1, cat_2, ... up to cat_27.

The javascript:shrink_all(27); should shrink cat_1, cat_2, ... up to cat_27.

The only thing missing is the script (showhide.js) itself... :)
Chikara
09-26-2007, 10:02 AM
What parts of this do you have finished?
Ivoman
09-26-2007, 10:15 AM
Well, I haven't posted any part of the showhide.js, because I think it is nothing compared to what I eventually want it to be. But here it is

:rolleyes:

<html>
<head>
<title>Show/Hide - Expand All/Shrink All</title>
<script type="text/javascript">
<!--
function display(obj) {
var el = document.getElementById(obj);
if ( el.style.display != "none" ) {
el.style.display = 'none';
}
else {
el.style.display = '';
}
}
//-->
</script>
</head>

<body>
<p><a href="javascript:display('cat_1');">Cat_1</a></p>
<div id="cat_1">content of Cat_1</div>
<p><a href="javascript:display('cat_2');">Cat_2</a></p>
<div id="cat_2">content of Cat_2</div>
<p><a href="javascript:display('cat_3');">Cat_3</a></p>
<div id="cat_3">content of Cat_2</div>
</body>
</html>
Chikara
09-26-2007, 10:33 AM
Pretty straight forward since you can make it show/hide on div. In show all or hide all, just have drop a for loop in there that counts down from 27.

1.) Get the new element ID
2.) Show/Hide that div
3.) Repeat

Do you need me to code this for you, or do you want to give it a go?
Ivoman
09-26-2007, 10:38 AM
Yes, please code it for me, Chikara. I don't understand your advice. Maybe I will once I see what you wrote. I guess I will. :)
Chikara
09-26-2007, 10:42 AM
<html>
<head>
<title>Show/Hide - Expand All/Shrink All</title>
<script type="text/javascript" language="javascript" >
function display(x){
var elm;
elm = document.getElementById(x);
var display = elm.style.display;
if(display == 'none')
elm.style.display = "inline";
else
elm.style.display = "none";
}// end display

function expand_all(x)
{
for(var i = 1; i < x + 1; i++)
var elm = document.getElementById('cat_' + i).style.display = "inline";
}// end expand_all

function shrink_all(x)
{
for(var i = 1; i < x + 1; i++)
var elm = document.getElementById('cat_' + i).style.display = "none";
}// end shrink_all
</script>

</head>
<body>

<p align="center"><a href="javascript:expand_all(4);">Expand All</a> / <a href="javascript:shrink_all(4);">Shrink All</a></p>

<p><a href="javascript:display('cat_1');">Cat_1</a></p>
<div style="display:none;" id="cat_1">Show content of Cat_1</div>
<p><a href="javascript:display('cat_2');">Cat_2</a></p>
<div style="display:none;" id="cat_2">Show content of Cat_2</div>
<p><a href="javascript:display('cat_3');">Cat_3</a></p>
<div style="display:none;" id="cat_3">Show content of Cat_...</div>
<p><a href="javascript:display('cat_4');">Cat_4</a></p>
<div style="display:none;" id="cat_4">Show content of Cat_27</div>

</body>
</html>

Please note that I had to change the div id's in order for this to work correctly. This will ONLY work if your divs are in some sort of numeric order, which if I understand you correctly they are.

Enjoy.
Ivoman
09-26-2007, 10:51 AM
I took note of that. I can see why you implied to try and code it myself. Though I never knew about "inline". So I guess it would of taken me a while to manage this by myself. Nevertheless, I learned a bit today.

So thanks alot, Chikara. You made my day. :D

PS: The divs will always be in a numeric order.