Add to Favorites

Javascript, show and hide content blocks

There are plenty of times when you need to either hide or show a set of content on the page and you do not want to refresh the page to have a server side language handle the hide/show. Using javascript it's pretty trivial.

First you will want to decide what it is that you want to show/hide, for the purposes of this example it will be a div with an id:

<div id="i_am_content" style="display: block;">Hide me, show me, do whatever you please</div>

Now lets show some javascript to manipulate this, you could use a simple script such as:

document.getElementById('i_am_content').style.display = 'none';

If you like jQuery you could do something like:


If you wanted to make a button to hide the content, you could do something like:

<input type="button" value="hide it" onclick="$('#i_am_content').hide()" />

There are times when you want to toggle a div's hide/show state, using a simple javascript function you can accomplish this:

function toggle_div(id) {
var obj = document.getElementById(id);
if ( == 'none' ) { = 'block';
} else { = 'none';

Using this function you could make a button or a link that toggles the content:

<a href="javascript:toggle_div('i_am_content')">Toggle Div</a>

It's as simple as that to hide or show content on your page with javascript


Be the first to leave a comment on this post.

Leave a comment

To leave a comment, please log in / sign up