The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Expand/Collapse DIV with Javascript
nelsonandym
post Oct 2 2008, 05:14 PM
Post #1





Group: Members
Posts: 5
Joined: 2-October 08
Member No.: 6,798



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nelsonandym
post Oct 3 2008, 09:43 AM
Post #2





Group: Members
Posts: 5
Joined: 2-October 08
Member No.: 6,798



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...)
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Oct 3 2008, 11:24 AM
Post #3


WDG Member
********

Group: Root Admin
Posts: 8,308
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3



QUOTE
(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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nelsonandym
post Oct 3 2008, 11:25 AM
Post #4





Group: Members
Posts: 5
Joined: 2-October 08
Member No.: 6,798



QUOTE(Darin McGrew @ Oct 3 2008, 11:24 AM) *

QUOTE
(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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 3 2008, 12:41 PM
Post #5


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(nelsonandym @ Oct 3 2008, 12:14 AM) *

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).

QUOTE
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.

QUOTE
CODE
langauge="JavaScript"

Above's a typo, anyway the LANGUAGE attribute is deprecated in HTML4 in favor of TYPE. Browsers wont miss it.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nelsonandym
post Oct 3 2008, 01:08 PM
Post #6





Group: Members
Posts: 5
Joined: 2-October 08
Member No.: 6,798



QUOTE(Christian J @ Oct 3 2008, 12:41 PM) *

QUOTE(nelsonandym @ Oct 3 2008, 12:14 AM) *

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).

QUOTE
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.

QUOTE
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
nelsonandym
post Oct 7 2008, 03:28 PM
Post #7





Group: Members
Posts: 5
Joined: 2-October 08
Member No.: 6,798



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>

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 7 2008, 04:51 PM
Post #8


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



QUOTE(nelsonandym @ Oct 7 2008, 10:28 PM) *

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. smile.gif

QUOTE
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Daniel Stottman
post Jan 11 2014, 05:32 AM
Post #9





Group: Members
Posts: 1
Joined: 11-January 14
Member No.: 20,210



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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th August 2019 - 10:34 PM