Expand/Collapse DIV with Javascript Options

[nelsonandym]

Hello everyone,
I found this basic javascript code for expanding and collapsing a DIV. However, after 2 hours of searching Google, I haven't been able to find what I'm looking for. The script works, but isn't quite doing what I would like it to. First of all, I would like to have the DIV's collapsed when the page loads, and only expanded when the user clicks the link. By default, this script is expanding them on load. Is there a simple way to fix this? I've tried changing a few things with the obj.style.display command, but don't really know what I'm doing and could not get it to work. Additionally, as it is now (with being expanded on load), you have to click the link 2 times before it will collapse it. Can this be fixed easily also? And if so, how? I don't want anyone to go to any elaborate trouble of writing a ton of script to correct this, but if it can be accomplished with only a few fixes, I would appreciate it!
The code is listed below.
Thanks to anyone that can help,
Andy

edit: Also, i did a search on here, but didn't really find anything that really covered this.

CODE

<script langauge="JavaScript" type="text/javascript"> function doMenu(item) { obj=document.getElementById(item); col=document.getElementById("x" + item); if (obj.style.display=="none") { obj.style.display="block"; col.innerHTML="[-]"; } else { obj.style.display="none"; col.innerHTML="[+]"; } } </script>

<a href="java script:doMenu('main');" id=xmain>[+]</a>October 2008
<div id=main style="margin-left:1em">
Item 1<br>
Item 2<br>
Item 3<br>
</div>
<a href="java script:doMenu('main2');" id=xmain2>[+]</a>November 2008
<div id=main2 style="margin-left:1em">
Item 1<br>
Item 2<br>
Item 3<br>
</div>  

This post has been edited by nelsonandym: Oct 2 2008, 05:15 PM

[nelsonandym]

One more thing, is because this is on a site that I have to use a CMS to edit, I do not have access to put anything in the HEAD section of the document, so I am having to declare the javascript in the BODY. Could this be causing the problem, perhaps?

(I tried to just edit the post to add this comment, but couldn't find the edit button anymore...)

[Darin McGrew]

(I tried to just edit the post to add this comment, but couldn't find the edit button anymore...)

Posts can be edited for an hour. See the "Rules" link at the top of the page.

[nelsonandym]

(I tried to just edit the post to add this comment, but couldn't find the edit button anymore...)

Posts can be edited for an hour. See the "Rules" link at the top of the page.

Thanks. I suspected that may have been the case.

[Christian J]

By default, this script is expanding them on load. Is there a simple way to fix this?

You can hide them with CSS, but then they can't be opened by browsers without javascript.

The more reliable way is to hide them with additional javascript. For just a couple of items you might use:

CODE

document.getElementById('main').style.display='none';
document.getElementById('main2').style.display='none';

(add it above the function, and move the whole SCRIPT element after the items' HTML).

Additionally, as it is now (with being expanded on load), you have to click the link 2 times before it will collapse it. Can this be fixed easily also?

Didn't notice that, except perhaps intermittently in IE7. Is that the browser you used?

Also the second item's link may jump around when clicked because of the DIV's. This can be fixed with CSS or even a BR element in between.

CODE

langauge="JavaScript"

Above's a typo, anyway the LANGUAGE attribute is deprecated in HTML4 in favor of TYPE. Browsers wont miss it.

[nelsonandym]

By default, this script is expanding them on load. Is there a simple way to fix this?

You can hide them with CSS, but then they can't be opened by browsers without javascript.

The more reliable way is to hide them with additional javascript. For just a couple of items you might use:

CODE

document.getElementById('main').style.display='none';
document.getElementById('main2').style.display='none';

(add it above the function, and move the whole SCRIPT element after the items' HTML).

Additionally, as it is now (with being expanded on load), you have to click the link 2 times before it will collapse it. Can this be fixed easily also?

Didn't notice that, except perhaps intermittently in IE7. Is that the browser you used?

Also the second item's link may jump around when clicked because of the DIV's. This can be fixed with CSS or even a BR element in between.

CODE

langauge="JavaScript"

Above's a typo, anyway the LANGUAGE attribute is deprecated in HTML4 in favor of TYPE. Browsers wont miss it.

Thank you so much for the reply and help! I will give all that a whirl and see if I can get it to work like I'm wanting to.
As far as what browser I'm using. That was on FireFox 3.x on Windows XP Pro. I'll give it a try again after I make the suggested modifications, and see if it is still doing it.
Thanks again for your help!!
Andy

[nelsonandym]

I was finally able to implement the changes you suggested, and they work flawlessly, just like I was wanting them to!
Thank you so much!

I do have a follow-up type of question, if you will.
I would like to add a link that, when clicked, expands or collapses all of the div's simultaneously. Can this easily be done without a huge amount of modification or effort? It's not really a necessary feature, just one of those things that I think would be nice.
Thanks again for all your help, really appreciate it.
I've placed the current, up-to-date code below.
-Andy

CODE

<style>
.margin {
margin-left:15px;
}
</style>

<a href="java script:doMenu('main');" id="xmain">[+]</a> <strong>October 2008</strong>
<div id="main" style="margin-left:1em">
<strong>•Saturday, October 18</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main2');" id="xmain2">[+]</a> <strong>November 2008</strong>
<div id="main2" style="margin-left:1em">
<strong>•Tuesday, November 4</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main3');" id="xmain3">[+]</a> <strong>December 2008</strong>
<div id="main3" style="margin-left:1em">
<strong>•Tuesday, December 2</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main4');" id="xmain4">[+]</a> <strong>January 2009</strong>
<div id="main4" style="margin-left:1em">
<strong>•Tuesday, January 6</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main5');" id="xmain5">[+]</a> <strong>February 2009</strong>
<div id="main5" style="margin-left:1em">
<strong>•Tuesday, February 3</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main6');" id="xmain6">[+]</a> <strong>March 2009</strong>
<div id="main6" style="margin-left:1em">
<strong>•Tuesday, March 3</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main7');" id="xmain7">[+]</a> <strong>April 2009</strong>
<div id="main7" style="margin-left:1em">
<strong>•Saturday, April 4</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main8');" id="xmain8">[+]</a> <strong>May 2009</strong>
<div id="main8" style="margin-left:1em">
<strong>•Tuesday, May 5</strong><br>
<span class="margin">TEXT</span><br>
</div>

<a href="java script:doMenu('main9');" id="xmain9">[+]</a> <strong>June 2009</strong>
<div id="main9" style="margin-left:1em">
<strong>•Tuesday, June 2</strong><br>
<span class="margin">TEXT</span><br>
</div>

<script language="JavaScript" type="text/javascript">
document.getElementById('main').style.display='none';
document.getElementById('main2').style.display='none';
document.getElementById('main3').style.display='none';
document.getElementById('main4').style.display='none';
document.getElementById('main5').style.display='none';
document.getElementById('main6').style.display='none';
document.getElementById('main7').style.display='none';
document.getElementById('main8').style.display='none';
document.getElementById('main9').style.display='none';
function doMenu(item) {
obj=document.getElementById(item);
col=document.getElementById("x" + item);
if (obj.style.display=="none") { obj.style.display="block"; col.innerHTML="[-]"; }
else { obj.style.display="none"; col.innerHTML="[+]"; } }
</script>

[Christian J]

I was finally able to implement the changes you suggested, and they work flawlessly, just like I was wanting them to!
Thank you so much!

You're welcome.

I do have a follow-up type of question, if you will.
I would like to add a link that, when clicked, expands or collapses all of the div's simultaneously. Can this easily be done without a huge amount of modification or effort?

It can be done with some effort, but if you're going to add more items in the future the whole thing will become more and more bloated. It's better with a script that works without further modifications even if more items are added. Here's an old one, but you may not like the buttons: http://forums.htmlhelp.com/index.php?s=&am...post&p=5664

[Daniel Stottman]

Hi,
I use this simple Javascript method to be invoked when clicking on a link (a href) or on a div too (eg onclick event).

CODE

<script language="javascript">
function toggle(elementId) {
    var ele = document.getElementById(elementId);
    if(ele.style.display == "block") {
            ele.style.display = "none";
    }
    else {
        ele.style.display = "block";
    }
}
</script>

Here how to invoke it in the html.

CODE

<div onclick="java script:toggle('toggleText');">
<h1>Hello!</h1>
<div id="toggleText" style="display:none; border-width:2px; border-style:solid">Hidden data...</div>
</div>

Hope it helps.

Original source on snip2code - How to collapse a div in html