Toggle show/hide script

[vchris]

You've probably seen those sites where you click on a link and without the page reloading the content changes. I know it's done with javascript. Is there a way to do this in css/xhtml? If not can you recommend a great site for such a script?Only thing I can think of is changing the class name in the div that contains the content to another name so in the css I simply set it to visible.

Edited August 5, 2006 by vchris

[Jack McKalling]

Yes indeed, but the fact is, nothing can be changed without script. So you do need eg javascript for it. Though there is nothing more simple like this sort of script! Do you need this for a menu? Then there are lots and lots of scripts available for you. A simple spoiler can be scripted like this:

var Elem = document.getElementById("myHideDiv");if (Elem) {Elem.onclick = function() { this.childNodes[0].style.display = (this.childNodes[0].style.display == "") ?"none" :""; }}

Put this script right beneath the HTML of that element, or just at the end of your body, within a script element. It simply applies an event handler to the element that should be clicked to hide the first element inside (that is what the childNodes[0] stands for). If clicked, it hides the content, but if clicked again, it shows it again

[vchris]

Thanks! You're my favorite prof :)Yes it's for a menu. It's for the coding section on my site. Basically I will have a sub horizontal nav bar for the programming languages (html, css...) and once the link is clicked the content underneath would display some <ul>s with projects/exercises.How do you call this kind of script? I tried to search for them on google but I didn't have any name so couldn't find much. Any site to recommend for this? I'm open to other ideas for my coding section.Oh yeah and I'm used to working with Photoshop CS but got CS 2 installed and haven't really worked with it much. You know how in CS you could Ctrl+click on another layer and you would select the content of that layer and then you could erase part of the other layer? How do you do that in CS 2?

[Jack McKalling]

This sort of script is called a Drop Down Menu. You can find some of them in here: http://www.dynamicdrive.com/dynamicindex1/But it doesn't have to become the complicated most of their scripts get. The tiny script I wrote above does work actually, but it doesn't show the content on top of something that is under the navigation bar, but it would slide all that is beneath to below the content of the menu. There are other ways however, instead of using "style.display". You can use "style.zIndex" to set it a number and have it on top of everything else (but style.position should then be used) and lots of other ways too. You should look at the codes they use for various scripts, and try to think what you think is best in your situation

[vchris]

Thanks Dan! Exactly what I needed

[Jack McKalling]

You're welcome