Using javascript to switch content dynamically

he purpose of this tutorial is to show you how we can use Javascript to switch the content of our website dynamically. This Meaning we can switch the content on our page without having to reload.

The method we are using here requires that we have 2 DIVs, one of which will be displayed when the page is loaded, the other will be hidden using the 'display:none;' declaration.

Inside each DIV we will place two anchors which will call a Javascript function when clicked. This function will hide the visible DIV & reveal the hidden one.

The end product:

Page 1 Page 2

Page 2

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

Ok, lets get started. First of all we will need to use HTML to structure the DIVs.

The HTML:

<div id="one">
<div class="leftSection">
<img class="image" src="image1.png" alt="image1">
<div class="leftunder">
<a href="#">Page 1</a>
<a href="#">Page 2</a>
</div>
</div>

<div class="rightSection">
<h2> Page 1 </h2>
<p> Text goes here </p>
</div>

<div class="clear">
</div>

</div>

As you can see in the above code we have a container DIV, named 'one'. Nested inside is the 'leftSection' DIV & the 'rightSection' DIV. Both of which will be floated to the left using CSS.

As mentioned at the top of the page we have included a couple of anchors, these will be used to call the javascript function when clicked.

Anyway, i wont go any further into the HTML as that is not the purpose of this tutorial.

The structure of the second DIV is going to be identical to the first. Simply copy and paste the whole DIV & rename it 'two'.

Using some simple CSS we can now quickly style both DIVs.

The CSS:

h2 {
color:#413f3f;
margin:0;
padding:0;
}
p{
margin:0;
padding:0;
padding-bottom:28px;
}

#one {
display:none;
color:white;
background:url(bg.png);
}
.leftSection {
float:left;
width:300px;
margin-left:250px;
}

.leftunder{
text-align:center;
width:232px;
}

a {
padding-left:5px;
padding-top:0;
margin-top:0;
}

.rightSection{
float:left;
width:500px;
margin-left:100px;
margin-top:30px;
color:#615f5f;
}
.clear {
clear:both;
}

#two {
color:white;
background:url(bg.png);

}
.image {
padding-top:24px;
padding-bottom:1px;
}

As with the HTML I don't want to talk too much about the CSS, this tutorial is mainly focused on the Javascript code. A lot of the CSS is just straight forward stuff, changing font color, positioning elements etc.

One thing I would like to mention though is that we have used the 'display:none' declaration on the first DIV.

What this does is take the element out of the document completely. We could of used the 'visibility:hidden' declaration instead.

The reason we did not is because the visibility declaration may hide the element, but the element will still take up space on the page.

This way, when one DIV is hidden, and the other revealed they appear to be aligned in the exact same position. Almost as if they are sitting on top of each other.

Obviously for this to work, the DIVs need to have the same structure & size etc.

 Now that we have our DIVs created and styled we can move on to the javascript.

The Javascript:

Function - Place this within the head element:

<script type="text/javascript" language="JavaScript">
function ShowContent(d,e) {
document.getElementById(d).style.display = "block";
document.getElementById(e).style.display = "none";
}

</script>

As you can see we have used the script tag with a type of Javascript. This obviously tells the browser that the following is going to be a client side script, and more specifically a javascript, or is it a javascript script?

Anyway, following on we have declared a function and named it 'ShowContent'. The function is to accept 2 arguments. To achieve this we need to declare 2 parameters in the parenthesis following the function name. Take a look at the code below for an example of this:

function ShowContent(d,e)

Parameters are basically the same as variables, except we do not declare the value. The value is defined when we actually call the function. In this example the value will be the name of our DIVs, 'one' & 'two'.

Next we need to tell the function what to do with these parameters. First we change the display value of the hidden DIV to block, and vice versa for the visible DIV. We do this using the following code:

document.getElementById(d).style.display = "block";
document.getElementById(e).style.display = "none";

If you are unfamiliar with the 'getElementById' method dont worry. It simply selects the first element in the page with the specified ID.

Call the function:

Now that we have the function created, we need to alter our anchors so that when clicked they call the 'Showcontent' function.

You can see the changes we've made highlighted below:

<div id="one">
<div class="leftSection">
<img class="image" src="image1.png" alt="image1">
<div class="leftunder">
<a href="javascript:ShowContent('one','two');">Page 1</a>
<ahref="javascript:ShowContent('two','one');"> Page 2</a>
</div>
</div>

So in the first example(Page 1):

d = one

e = two

Therefore one becomes visible, while DIV two is removed from the page.

The opposite stands for the second link:

d = two

e = one

Therefore two becomes visible, while one is removed.

The one problem you do have with this script is that if the viewer has javascript disabled the anchors simply wont work. If you have a way around this please let me know!

Thanks for reading. Please leave a comment below if you have anything to add.