Hidden Divs
This simple script that allows you to create divs which are generated with Javascript (meaning they don’t exist if Javascript is disabled) and can be revealed upon clicking on another item which you specify by it’s id. This script can be useful for created things such as the quick search boxes you see on a lot of forums nowadays.
Hidden Divs Example | Hidden Divs Source
You have two options when implementing this code:
- Placing the specific code in the Javascript source file.
- Placing the specific code in the HTML file.
If you do the first, you need to place the <script> element which has a source (src) attribute set to include the Javascript source below the element(s) which you want to use as the parent(s), like so:
<script src="js/HiddenDivs.js" type="text/javascript"></script>
Then you will just place your addDiv function calls at the bottom of the HiddenDivs source file. If you use this method, I recommend placing the <script> element just above the closing body tag.
If you’d like to use the second method, you would place the <script> element, as shown above, anywhere you’d like (I recommend in the <head> element). Then, you would place another <script> element somewhere after the parent element(s), and place your addDiv function calls there.
The HiddenDivs object only has one function, addDiv(). It takes three parameters: link_id, div_id, div_body.
addDiv(link_id, div_id, div_body)
The HiddenDivs has a variable already defined, hiddenDiv which is what you will use to call addDiv with. Here is an example line:
hiddenDiv.addDiv('parent','testdiv','<a href="http://www.arwebdesign.net">Azure Ronin Web Design</a>')
The link_id is the id of the parent element. This can be any element, as long as it can contain a <div> element (which is most block elements, such as <div>, <li>, <body>, etc.). The parent element will get an ‘onclick’ attribute set for it which will toggle the hidden div.
The div_id is the id given to the <div> which the Javascript creates. This is useful so you can modify the <div> that you create with CSS.
Finally, and perhaps most importantly, the div_body parameter is a string which is where you basically define the <div> element. You just place everything in this string that would be inside of the <div> element.
And that’s it. You can add as many hidden divs as you want, just use hiddenDiv.addDiv().
Tags: box, divs, hidden, javascript, Scripts, search, source
