homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

Expand / Collapse Nightmare
Help with setting up JS to make DIV collapse and expand on click

5+ Year Member

Msg#: 3688538 posted 3:04 pm on Jul 2, 2008 (gmt 0)


I am doing a page, which has a lot of content, some of which is unnecessary to some readers, while others will want to find out more. To make it work for both, i thought to make some content expand and collapse on click.

Here' an example:

If you scroll down to the "General Information" You'll see that you can expand windows and collapse them.

I am HTML, JS, CSS illiterate and use Dreamweaver for everything. I can navigate through the code, make necessary small changes, but when it comes to adding something as complex as this - my head is ready to burst.

I tried a bunch of tutorials from search and cant get any of them to work at all! On click none of them expand.

This is my last hope! :D I would appreciate if you could guide me on how to make this work, or direct to the source that can help with this.

Thank you.



WebmasterWorld Senior Member eelixduppy us a WebmasterWorld Top Contributor of All Time 5+ Year Member

Msg#: 3688538 posted 3:47 pm on Jul 2, 2008 (gmt 0)

When you click on the 'button' to change the visibility, you need to use javascript to change the element's display style. The code would look something like the following, then:
The javascript function:

function show_hide(obj) {
var el = document.getElementById(obj);
if ( el.style.display != 'none' ) {
el.style.display = 'none';
else {
el.style.display = '';

And then how to use it:

<a href="javascript: show_hide('content')">Show/Hide</a><br />

<div id="content">
Here is the content that you want to allow to hide/unhide!

Try that and see if that helps :)


WebmasterWorld Senior Member fotiman us a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

Msg#: 3688538 posted 4:33 pm on Jul 2, 2008 (gmt 0)

Don't put javascript into your href values. There is no such javascript: protocol. Instead, put it where it belongs... in an onclick event handler.

<a href="#content" onclick="show_hide('content');return false;">Show/Hide</a>


<a href="#content" onclick="show_hide(this.href);return false;">Show/Hide</a>

(with that second example, you'd need to modify your show_hide function to check for a leading '#' character on the value passed in and strip that off). I'm not going to bother doing that here, just wanted to show how it could be simplified so you don't have that redundant 'content' string.

An even better solution (though more complicated if you are JavaScript illiterate) would be to "attach" a listener to the link's onclick handler instead of using inline event handlers. That would give you a cleaner separation of content and behavior. But it sounds like you need to learn to walk before you can run. :-)

[edited by: Fotiman at 4:36 pm (utc) on July 2, 2008]


5+ Year Member

Msg#: 3688538 posted 1:50 pm on Jul 4, 2008 (gmt 0)

Thanks so much, for your replies.

I'll try your suggestions and come back shortly.

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved