Shall we try an example?
How it works
This is easy. Here are three steps to getting it working:
- 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>
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 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.