A simple hide/show div script

A expandable DIV with CSSA script for showing or hiding blocks of text can be useful in many situations.

You can keep your page very easy to overview, and give the user additional information, without forcing  them to leave your page.

In this post you’ll learn to build a simple script that can show and hide content within a div

The philosophy of the script

There are many scripts that create this effect on your page, but most of these scripts requires changes in the <HEAD> part of your code.

This isn’t necessary optimal if you eg. uses WordPress and only want to have the show/hide effect on selected pages.

In this script, you include the javascript code in the <BODY> section of the page, which means that you can easily include the script on individual pages, even if you are using a CMS system like WordPress

The script

The script is based on a small piece of javascript that handles the expansion or collapsing of the content DIV:

<script language=”javascript” type=”text/javascript”>
function jschange(o) {
if(document.getElementById(o).style.display==’none’) {
document.getElementById(o).style.display=’block’;
} else {
document.getElementById(o).style.display=’none’;
}
}
</script>

As mentioned earlier one of the great things about this script is, that this javascript hasn’t got to be put in the <head> section of your HTML, It works just as fine if it’s located within the <body> tags.

When the script is ready in you HTML, it’s time to markup some content that will be hidden until the user clicks a link.

<a href=”javascript:jschange(‘jsdiv’);”>Link toggle text</a>
<div id=”jsdiv” style=”display:none;”>Hidden content<a href=”javascript:jschange(‘jsdiv’);”>Close (X)</a>.</div>

The first line creates the link that expands or collapses the hidden content, and the second line contains the <DIV> with the hidden content.

As a extra feature, a close link has also been added in the end of the <DIV> so the users can easily see a  collapse link, even if there is plenty of content within the hidden <DIV>

To wrap things up – here is a demo of the code:

Show or hide text

Share and Enjoy

  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS
fold-left fold-right
About the author
Jørgen Nicolaisen has been passionately interested in everything online since 1995. His experience is based on working with small hobby projects as well as high volume websites. Jørgen is currently focused on the PHP based programming framework - Codeigniter, and WordPress naturally

3 Replies to A simple hide/show div script

  1. Serena says:

    I’ve been searching for a light-weight code like this forever! Works great! One thing I would note is that the javascript has to be placed after your links in order to work. It took me a while to figure that out *_* Thanks again!

  2. Patrick says:

    is there a way to make “Show or hide text” text disappear after being clicked? I want to do a “Read more…” and then display the extending text. and when the Close (x) is clicked the “Show or hide text” (“Read more…”) text is displayed again.

  3. angelos says:

    perfect script.

Comments are now closed for this article.