Monday, September 28, 2009

Show/hide text on web page

+ What will we discuss today? (Click me.)

You want to make your web page neat and concise but you have too much information to share? You can achieve both by using the drop down text on your web page. Just write down several outlines and when the readers click on any of them, a hidden text block would be dropped down to shown the details.

To implement it, you need to use Javascript. Of course, your readers must enable Javascript in their browsers.

You can do it in simple three steps:

1. Add a Javascript function in your <head> block.
<script type="text/javascript">
function toggleShowHide(elementId) {
    var element = document.getElementById(elementId);
    if (element) {
        if ( == "none")
   = "inline";
   = "none";

This function accepts on argument elementId which is the unique id of the HTML element you want to toggle.

When the style.display attribute is set as inline, the HTML element is shown on the web page. When the attribute is set as none, the HTML element is hidden and it doesn't take up any space just like it doesn't exist.

2. Assign an id to the text block you want to hide initially. And hide it.
    <div id="hiddenText" style="display:none">The trick to include a drop down text in your web page.</div>

We assign hiddenText as the id of our hidden text block. We hide it by setting its style.display attribute as none.

3. Define the text the readers can click on to show the hidden text block.
    <p onClick="toggleShowHide('hiddenText')">+ What will we discuss today? (Click me.)</p>

Function toggleShowHide() will be called when this paragraph is clicked. By passing in the element id of hiddenText, which we assigned in step 2, the hidden text block can be dropped down or removed by clicking this paragraph.


Anonymous said...

Thanks for your information, can you explain where to insert things in step 2 and 3 on (HTML) of the web page

Zen said...

The code in step 2 and 3 can be inserted into anywhere you want in the <body> of the HTML page, just as the example given in the beginning of this post.

Anonymous said...

This is very cool, I tried it on my machine running a Linux Live CD and it worked great. A local page showed up in the Firefox browser with this feature working and I was happy. Then, I tried it on my machine running Windows 7 and it works for this page when you view it on the net. But when I tried to build a webpage and check the local html file out in Firefox on the Windows 7 machine it won't work! Any idea why it won't work on a local page in Windows 7?

I know a lot of stuff is just 'there' in Linux, right out of the box, and a lot of the same stuff isn't installed on Windows. So, what would I need to do to be able to have this work on local pages in Firefox under Windows 7? Any help you can give would be greatly appreciated. Thanks

Anonymous said...

Please disregard my earlier post, I did something wrong with the code placement and that was why the page wasn't working correctly as a local file in the browser.

Mr Fellows said...

Is it possible to use this twice on one page? I have tried but it only works on the first instance.

John Goold said...

This can be used on more complex things than just paragraphs — images, multiple paragraphs, nested lists, etc.

Instead of putting the id and display attributes on a paragraph, wrap what you want to display-hide in a div and put the attributes on it.

John Goold,
NL Canada

Get This <