Using javascript to hide and unhide elements dynamically

My favorite aspect of javascript is that it enables you to add great features to your site like showing/hiding parts of it when a user clicks a link without reloading, get some data from a database and displaying it in a new div, again without reloading. In fact, it would be possible (although not very comfortable and easily codeable) to create a big website, like a WordPress blog without any reloading at all, no matter where you click.

This is usually referred to as AJAX, although most of it is javascript and HTML, and it is actually easier than it seems. In my opinion calling the hiding and showing of elements is not yet AJAX, because in my eyes ture AJAX communicates with the server in the background. We will only be changing CSS properties and element contents with javascript in this post to achieve our goal.

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.

<a id="link1" href="javascript:display('show', 1)">Explain</a>
<div id="explanation1" style="display:none">This form let's you input your order details, please keep it short!</div>


As you can see I have given the div a unique identifier. This is needed so the javascript knows which div I want to change. I have added a number to the id because there might be many more explanations, these would receive different numbers. I have also given the link an id, with the same number at the end as the div. Once the user clicked the link, we want to change the link, so clicking it again will close the div.

The link contains "javascript:", which indicates that this link doesn't point to a page, but should execute javascript code, in our case a function (display), with two arguments. The first tells the javascript function which will execute that we want to show the div (as opposed to hiding it), the second is a numerical identifier, which should be the same as the number in the div's id. Take a look at the javascript code below with the explanation afterwards.


<script type="text/javascript">

function display(action, id)
{
if (action == 'show')
{
document.getElementById("explanation"+id).style.display = "block";
document.getElementById("link"+id).href= "javascript:display('hide', "+id+")";
document.getElementById("link"+id).innerHTML = "Close";
}

if (action == 'hide')
{
document.getElementById("explanation"+id).style.display = "none";
document.getElementById("link"+id).href= "javascript:display('show', "+id+")";
document.getElementById("link"+id).innerHTML = "Explain";
}
}

</script>


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".

The second line grabs the link element, and instead of changing the style, it changes the address it points to (href), which in our case will be a new piece of javascript code. We change it to the exact same code, but instead of "show" as the action, we now have hide.

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.

That wasn't so hard was it? The uses for these javascript methods are truly endless, from checking registration forms before submitting, to dynamically adding text to your site, you can do almost anything here, your imagination is truly the limit, so have fun!

Advertisement