Comments on: Useful JavaScript: Expandable/Collapsable Divs

By: Tom

Tom — Mon, 16 Feb 2009 17:23:57 +0000

Once again, great article! I was actually looking for a clean and easy way of doing something like this with JavaScript, and this is exactly what I needed. I will implement it later, when I need to. Thanks a bunch!

By: Monique

Monique — Thu, 08 Jan 2009 12:58:16 +0000

Hi, found a solution to my own question :o)thought I’ld post it, save other people the hassle. This code gives a + or a - button.

Put this in your CSS file:

1
2
3
4
5
6
7
8
9
10
11
12

.buttonopenclose{

    border:1px solid #cccccc;

    display: block;

    text-align: center ;

    text-decoration: none;

    color: #FC6401;

    float: left;

    font-size: 11px;

    font-weight: bold;

    padding: 4px;

    color: #ff6600;

}

This is the HTML code:

1
2
3
4
5
6
7
8
9

<div id="openthemall" class="buttonopenclose">

<a href="#" onclick="showElement('closethemall');hideElement('openthemall');showElement('antwoord11');showElement('antwoord12');showElement('antwoord13');showElement('antwoord14');showElement('antwoord19');hideElement('vraag11');hideElement('vraag12');hideElement('vraag13');hideElement('vraag14');hideElement('vraag19');return

false;">

+</a>

</div>

<div id="closethemall" style="display: none;" class="buttonopenclose">

<a href="#" onClick="window.location.reload()">-</a>

</div>

By: Monique

Monique — Thu, 08 Jan 2009 09:16:42 +0000

Hi,

I would like to be able to close all divs at the same time, any idea on how I could do this?

Thanks,
Monique

By: Monique

Monique — Wed, 07 Jan 2009 14:08:39 +0000

I got it working! It turned out I needed to add per line.
Overlooked that…..
Thanks for the code, it helped me out!
Monique

By: Monique

Monique — Tue, 06 Jan 2009 00:43:14 +0000

Hi,
Somehow I get an error (blank page) when my text is too large in the content div.
Is there any way I can avoid this?

I am using the second coding with first and second section.

Thanks a bunch,
Monique
Harmelen, the Netherlands

By: Scott

Scott — Mon, 25 Aug 2008 19:45:02 +0000

Love it!! Just applied it to our site and works great. It may also be of interest to know that this is a good tool for SEO. Google has gotten much better at crawling text within java so it counts for keyword density and such. I would also like to learn how to do a scrolling java div such as the one at the bottom of this site:
http://www.volusion.com/

Thanks again!

By: Ajit

Ajit — Fri, 22 Aug 2008 15:54:25 +0000

you should have considered implementing opening one div while closing previously open divs.

By: Kevin Skoglund

Kevin Skoglund — Fri, 30 May 2008 17:11:53 +0000

You could and you could also use various JavaScript libraries to do the showing and hiding.

This is just a simplified version to illustrate the process.

By: Glen

Glen — Fri, 30 May 2008 17:01:19 +0000

You should really consider using some kind of JS loader to add these events, instead of modifying the code directly. Not only will it move things out of your HTML, it can be cached, etc, blah blah blah.

Plus, it looks pretty to not have those onclicks.