Sign In
Register
Help
What are we going to do? Well, admittedly, sooping up your site with Javascript is not the first priority. But when you just want a cooler, and more functional site, javascript leaves endless possibilities. Well, here is the goal, you are going to create a javascript function which makes an element or tag along with enclosed data dissapear, and reappear, all the while being controled by a link, which may be anywhere on the page.
Note: I made this specifically so that you could use it anywhere, and that you are not restricted to the top of the document, in the head, etc. This should work anywhere, with any type of link (image too).
Here is the whole code, I will go over it in the following text.
<script type="text/javascript">
function toggle_box(id) {
var identity = document.getElementById(id);
if(identity.style.display == "block" || identity.style.display == "")
{
identity.style.display="none";
} else {
identity.style.display="block";
}
}
</script>Call Up Using:
<a href="java script:toggle_box('tag_id_here')">Toggle!</a>
<div id="tag_id_here">
Content in here will be affected
</div>I recommend reading the tutorial, or atleast the parts at the end which disclose a little more about how to change some of the actions, and some tricks you can use with CSS.
Let Us Begin!
1. Lets start off by going over the CSS. We will be fiddling with the display property. What is the CSS display property? There are various values that can be put in, all of them can be found at the following location:
http://www.w3schools...ass_display.asp
The property value that we are going to use is none. With this value, the enclosed data (by whichever element) will not be displayed. Different from the menus in Wikipedia the code for this data is still visible in the source code (if you are using Fire Fox, you may view a websites source code by pressing Ctrl + U), if not, the option is usually listed under "Tools". Example:
<html>
<head>
<style type="text/css">
#element {
display: none;
}
</style>
</head>
<body>
<div id="element">
This content will not be displayed, try it on your computer!
</div>
</body>
</html>Is that not cool? It gets better when you can change these values on the fly, like with javascript. The idea is to change this value to anything else that will be displayed, for our purposes, block will work just fine because a div is already a blocked element.
2. Well, lets work with javascript now. I assume you have some basic knowledge of JS, but if you do not, rest assured it is like PHP in many ways. Well, lets make a function:
<script type="text/javascript">
function toggle_box(id)
{
//Some Action to Take
}
</script>
<!--we could call this up using the following (there are other ways)-->
<a href="java script:toggle_box('element')">Toggle!</a>Not too much to explain, all I have done is declare that I am defining the function "toggle_box" and it requires one argument, which will be used to identify which element you would like to toggle later on. To use this function, you can make it a link, for which you must declare "java script:" as a protocal before declaring the action to take.
3. Lets continue to develop the function. Before we can alter an element, we have to find it, otherwise javascript does not know which tag to change. How do we do this? We give an id to it. Before I can find an element, I have to assign it an id to one, lets do that.
<script type="text/javascript">
function toggle_box(id)
{
// fetch information on the style for the tag
//with an id equal to the variable id
var identity = document.getElementById(id);
}
</script>
<a href="java script:toggle_box('toggle')">Toggle!</a>
<!-- I assigned this div the id 'toggle', like the text in the ( ) -->
<div id="toggle">
This text is inside a div, which has the id "toggle"
</div>Here whats new: I added a line of code "document.getElementById(id)" which gets the information on any tag with a matching id to the one specified "java script:toggle_box('here')". When I click on the link, it will preform an action for all tags with this specific id, so all in all with this, you can control as many elements as you like with on link so long as they have a common id. (this may not be XHTML standard however, it could just be a warning though).
4. Now we have an element to affect, which is out div element with the id toggle and by clicking the link, we call up the function toggle_box('toggle'). You can change the id between the parenthesis to anything, so long as you have a corresponding element to affect.
Now we have to create a code that will change the value of the style property display to none when we click the link. (If you test this out, the content inside the div element should disappear, but will not re-appear without refreshing).
<script type="text/javascript">
function toggle_box(id)
{
var identity = document.getElementById(id);
// New Code Bellow!
identity.style.display="none";
}
</script>
<a href="java script:toggle_box('toggle')">Toggle!</a>
<div id="toggle">
This text is inside a div, which has the id "toggle"
</div>What this does is change the style value of the display property to none, and thats all. You can't get the content to reappear unless you refresh the page. But we will change that! Note that identity is the information for the selected element (by id) saved in a javascript variable.
5. The easiest may I could think of to make a toggle function was to use good old conditional statements. Here is the code!
<script type="text/javascript">
function toggle_box(id)
{
if(identity.style.display == "block" || identity.style.display == "")
{
identity.style.display="none";
} else {
identity.style.display="block";
}
}
</script>
<a href="java script:toggle_box('toggle')">Toggle!</a>
<div id="toggle">
This text is inside a div, which has the id "toggle"
Content within this div will be affected
</div>Thats it! A tad of explaining to do. We have the condition, if the if the value for display is "block", change it to "none", or if display has no value (when the page loads, the element is said to have no values until you assign them in javascript) change it to "none" as well because when you load, the element will be showing. Else, do the opposite, and show the element if it isn't being shown already. Simple enough? Try it out! We use an identical code on this site, such as the toggle search box for our news archives!
This post has been edited by Strum: 15 June 2006 - 06:58 AM
MultiQuote
