Home > Articles > Webmaster resources > Javascript hide / reveal script

Using Javascript to hide and reveal text and graphics

One of the most useful things you can do with javascript and CSS is to make things appear and disappear when you want to. It means you can focus the user's attention on what's needed at a particular stage of a process (eg e-commerce), or you can create special effects by making text or graphics pop onto the screen instantly.

I created a tool that enables people to get their copy of my novel Earworm signed over the internet. This uses the script to good effect to make the 'signed' letter instantly appear.

There are lots of javascript and CSS libraries that have features built in to hide and reveal different sections of the page, but they usually carry a heavy download penalty. Unless you wanted to use the library for something else (and something much more difficult, at that), then you're better off adapting this short free script to hide and reveal webpage content.

Shall we try an example?

I've got hiccups. Give me a surprise!

How it works

This is easy. Here are three steps to getting it working:

  1. Create the content you want to hide. Put it inside a DIV and give it an ID. Let's call our DIV 'hideaway'. If you have more than one on a page, give them different names. You also need to set the style to "display:none;" if you want it to start off hidden. It should look like this:
    <div id="hideaway" style="display:none;">Here's the hidden content</div>
  2. Create your link and put in the following Javascript:
    <a href="javascript:;" onClick="document.getElementById('hideaway').style.display='block';">Reveal hidden content</a>
  3. To create a link that hides it again, using the following Javascript:
    <a href="javascript:;" onClick="document.getElementById('hideaway').style.display='none';">Hide content again</a>

The content that you make appear and disappear can include image tags and any other HTML - it's just text in the above to make it easier to understand.

More advanced stuff you can do

That technique is fairly basic, but it underlines some quite sophisticated effects. Here are some ideas for other ways to use it:

  • Assign the 'onclick' action to form buttons instead of links, so you can use form buttons to make things appear and disappear.
    <input type="button" value="Open application form" onClick="document.getElementById('hideaway').style.display='block';">
  • Use javascript to update the HTML inside the DIV you want to show. You can do that like this:
    <a href="javascript:;" onClick="document.getElementById('hideaway').innerHTML='new html goes here';">Update the HTML</a>
  • Use CSS to change the position of the material to be displayed or hidden. You could use that to overlay instructions on the whole screen in a pop-up window, for example.
  • Obviously, you can use more advanced javascript constructs - you don't have to tie updates to user actions. You could use timers, or could have things hidden or revealed when users do something else, or have events combined (eg, if they select gift wrap, perhaps you reveal both the gift address form and the gift wrap pricing form at the same time).


© Sean McManus. All rights reserved.

Visit www.sean.co.uk for free chapters from Sean's coding books (including Mission Python, Scratch Programming in Easy Steps and Coder Academy) and more!

Discover my latest books

Coding Compendium

Coding Compendium

A free 100-page ebook collecting my projects and tutorials for Raspberry Pi, micro:bit, Scratch and Python. Simply join my newsletter to download it.

Web Design in Easy Steps

Web Design IES

Web Design in Easy Steps, now in its 7th Edition, shows you how to make effective websites that work on any device.

100 Top Tips: Microsoft Excel

100 Top Tips: Microsoft Excel

Power up your Microsoft Excel skills with this powerful pocket-sized book of tips that will save you time and help you learn more from your spreadsheets.

Scratch Programming in Easy Steps

Scratch Programming IES

This book, now fully updated for Scratch 3, will take you from the basics of the Scratch language into the depths of its more advanced features. A great way to start programming.

Mission Python book

Mission Python

Code a space adventure game in this Python programming book published by No Starch Press.

Cool Scratch Projects in Easy Steps book

Cool Scratch Projects in Easy Steps

Discover how to make 3D games, create mazes, build a drum machine, make a game with cartoon animals and more!

Walking astronaut from Mission Python book Top | Search | Help | Privacy | Access Keys | Contact me
Home | Newsletter | Blog | Copywriting Services | Books | Free book chapters | Articles | Music | Photos | Games | Shop | About