Jump to content

Toggle show/hide script


Recommended Posts

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 by vchris
Link to post
Share on other sites

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 :)
Link to post
Share on other sites

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?

Link to post
Share on other sites

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 :)

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...