homepage Welcome to WebmasterWorld Guest from 54.234.180.187
register, login, search, subscribe, help, library, PubCon, announcements, recent posts, open posts,
Subscribe and Support WebmasterWorld
Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library : Charter : Moderators: whoisgregg

JavaScript and AJAX Forum

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




msg:3688540		 3:04 pm on Jul 2, 2008 (gmt 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.

 

eelixduppy




msg:3688568		 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!
</div>

Try that and see if that helps :)

Fotiman




msg:3688617		 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>

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]

Ivan




msg:3690474		 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.
Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About
WebmasterWorld ® and PubCon ® are a Registered Trademarks of Pubcon Inc.
© Pubcon Inc. 1996-2012 all rights reserved