Home1
Making Show/Hide Content Thu May 20, 2010 10:00 pm
Unknown Data
Registered Member
Posts : 833
Points : 254
Age : 28
Location : Denmark
Browser :
First topic message reminder :
Making Show/Hide Content Showing and hiding content on mouse click! |
A simple and good JavaScript function to know, is how to make a show and hide function. This can easily be done if you know just a little JavaScript, or some basic HTML/CSS + english. Let start out with taking a look at the function:
We start out with declaring a JavaScript function with an selection inside the parameter (this means that we can find the element within an event handler, and have multiple toggles on the page). Next, we create a variable to shorten out the length of the JavaScript. This means that the variable module, is equal to document.getElementById(elm). Now we start out with creating an if and else statement. First we check if the elm from the parameter is hidden, and if that is true, we are manipulating with it's style, and make it visible. But if it's false, then we can conclude that the element must be visible, and therefore are we instead changing it's display-property to none, eq. hiding it. And that's about it. So how do we use the function? Well, that's an easy one. We can activavte it through a event handler or other JavaScript functions, by simply change the parameter to the ID of the element that should be toggled. So if we write mytoggle("randomelement"), will the element with the ID of randomelement be toggled. A quick example could look like this (modify it for own use, or reply to this topic, if you want help):
To see the demo of this code : Click Here |
| Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators. |
Last edited by Unknown Data on Tue Jun 19, 2012 12:25 am; edited 5 times in total
)