Let's say you're creating a form, and you want a way to explain what the fields do or what data they need to contain, but you don't want to fill up too much space on screen, and you want to make it as unobtrusive as possible. In this case it would be cool to have a link with the anchortext "Explain", which would expand a section which explains what the user needs to do.
As the first step, we need to create a div which will hold the explanation text, and a link which will unhide it for the user.
<div id="explanation1" style="display:none">This form let's you input your order details, please keep it short!</div>
function display(action, id)
if (action == 'show')
document.getElementById("explanation"+id).style.display = "block";
document.getElementById("link"+id).innerHTML = "Close";
if (action == 'hide')
document.getElementById("explanation"+id).style.display = "none";
document.getElementById("link"+id).innerHTML = "Explain";
As you can see, the two arguments are named "action" and "id". The action argument will tell the script what we want to do (close the div or show it), the id argument will tell it which element we want to do it with. When you first click on the link the action is "show", so let's take a look at what's happening there.
First of all, the script checks what the action is. It sees that it is "show", so it executes three lines. the first line sets the div's dispaly to block, which means that it will appear, you will be able to read the text. this is achieved by "grabbing" the element using its unique id. By specifying "document.getElementById('theidhere')" you can grab any element. In our case, we always grab the element "explanationX", where X is the number beside it, given by the id argument. This id argument makes it possible to use one function for all the divs you want to open or close, so we won't need to code the same function for all the different ids out there. The bit of code following specifies that we want to change the style, more specifically the display property, and we want to change it to "block".
Line 3 grabs the same link element, but now changes the element contents. An element's contents is always whatever is between the start and end tag, in a link's case this is the anchor text. We change it from "Explain" to "Close" so the user knows that the div will disappear if he clicks the link again.
The three lines in case the action is "hide" do the exact same things, but change the values back, so if the user wants to open the div again he can do so.
Advertising revenue is falling fast across the Internet, and independently-run sites like Ghacks are hit hardest by it. The advertising model in its current form is coming to an end, and we have to find other ways to continue operating this site.
We are committed to keeping our content free and independent, which means no paywalls, no sponsored posts, no annoying ad formats (video ads) or subscription fees.
If you like our content, and would like to help, please consider making a contribution:
Ghacks is a technology news blog that was founded in 2005 by Martin Brinkmann. It has since then become one of the most popular tech news sites on the Internet with five authors and regular contributions from freelance writers.