Choose from our various pricing plans. There is a package for everyone!


Tutorial: Creating a simple hide/show function

View previous topic View next topic Go down

Tutorial Tutorial: Creating a simple hide/show function

Post by Unknown Data on Mon Jun 18, 2012 3:27 pm

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:
Code:
function mytoggle(elm) {
 var module = document.getElementById(elm);
 if (module.style.display == "none") {
 module.style.display = "block";
 }
 else {
 module.style.display = "none";
 }
}
So what does the function do?

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):
Code:
<script type="text/javascript">
function mytoggle(elm) {
 var module = document.getElementById(elm);
 if (module.style.display == "none") {
 module.style.display = "block";
 }
 else {
 module.style.display = "none";
 }
}
</script>

<a href="javascript:mytoggle('visiblediv');">Toggle div</a>
<div id="visiblediv">Content of one element to toggle.</div>

<a href="javascript:mytoggle('hiddendiv');">Toggle div</a>
<div id="hiddendiv" style="display: none;">Content of another element to toggle.</div>
avatar
Unknown Data
Premium Member


Age : 21
Posts : 119
Join date : 2012-04-24
Reputation : 8

View user profile http://woops.dk

Back to top Go down

Tutorial Re: Tutorial: Creating a simple hide/show function

Post by Mati™ on Tue Jun 19, 2012 7:57 pm

Really nice tutorial UD, and I hope to learn some JavaScript from your tuts. Smile

Your Tutorial has been accepted, congratulations!
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Tutorial: Creating a simple hide/show function

Post by koolkat96 on Fri Apr 05, 2013 1:36 pm

Nice!!!!
avatar
koolkat96
Member
Member

Age : 21
Posts : 3
Join date : 2013-04-05
Reputation : 0

View user profile http://houkago-tea-time.forumakers.com/

Back to top Go down

Tutorial Re: Tutorial: Creating a simple hide/show function

Post by Sponsored content


Sponsored content


Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum