Welcome to WebmasterWorld Guest from 54.234.244.30

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)

Junior Member

5+ Year Member

joined:Mar 5, 2008
posts:42
votes: 0


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 July 2, 2008 (gmt 0)

Senior Member

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

joined:Nov 12, 2005
posts:5966
votes: 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!
</div>

Try that and see if that helps :)

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

Senior Member from US 

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

joined:Oct 17, 2005
posts:4966
votes: 10


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 July 4, 2008 (gmt 0)

Junior Member

5+ Year Member

joined:Mar 5, 2008
posts:42
votes: 0


Thanks so much, for your replies.

I'll try your suggestions and come back shortly.

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members