Javascript, show and hide content blocks
Oct 30, 2009
by
0
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:
$('#i_am_content').hide();
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 ( obj.style.display == 'none' ) {
obj.style.display = 'block';
} else {
obj.style.display = '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
Leave a comment
To leave a comment, please log in / sign up
RSS Feed
Facebook
Twitter
LinkedIn
YouTube