Welcome to WebmasterWorld Guest from 54.145.144.101

Forum Moderators: open

Message Too Old, No Replies

Expand / Collapse Nightmare

Help with setting up JS to make DIV collapse and expand on click

   
3:04 pm on Jul 2, 2008 (gmt 0)

5+ Year Member



Hello!

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:
[microsoft.com...]

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

THE PROBLEM:
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.

3:47 pm on Jul 2, 2008 (gmt 0)

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



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!
</div>

Try that and see if that helps :)

4:33 pm on Jul 2, 2008 (gmt 0)

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



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>

or

<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]

1:50 pm on Jul 4, 2008 (gmt 0)

5+ Year Member



Thanks so much, for your replies.

I'll try your suggestions and come back shortly.

 

Featured Threads

Hot Threads This Week

Hot Threads This Month