I used to think, wrongly, that it would be no use learning about CSS display attributes, including the none value. After all, what’s the point of coding something you would hide? Soon enough, I knew better. I am now here to discuss how the display attribute, together with a little Javascript, could be used to style an element to hide information until users come across another element that will display the hidden information.

You may not know it but this effect is used in movie reviews and video games. Javascript code is used to hide spoilers to users who do not wish to know about certain parts of a film or a video game.
To carry out this effect, we first need to define the spoiler information as a class then set style for that class. We also need to create class for the button that users can click if they wish to view the spoiler:
.spoiler{
display: none;
width: 25%;
margin: 1%;
}
.spoiler_button{
border: outset #E4E4E4;
background-color: #E4E4E4;
}

We can now create the HTML elements with Javascript:
<span class=”spoiler_button” onclick=”document.getElementById(’spoiler’).style.display = ‘block’”>Show Spoilers</span>

If you are familiar with Javascript, you can probably tell that we are employing the onclick event. In case you do not know about Javascript events, the one we used activates the value of an element only when it is clicked. In our example, we are styling the element containing the spoiler’s HTML ID. We are altering the value originally set to show the attribute, converting it to block. The new value will now allow us to display the element on the page.

Next, we will create an element containing the spoiler information as a <div> tag. The tag’s class and ID values will be set to spoiler:
<div class=”spoiler” id=”spoiler”>There are parts of the final battles that I really liked. When Legolas takes down the elephant like animal was really exciting. I also love how the spirits of the dead army rush into battle at Aragon’s command. The fight between Frodo and Gollum was well done also. From start to finish Return of the King is action packed and entertaining.</div>

The code is simple but it allows you to implement a very useful function. It also incorporates a Web 2.0 feel to your website. You could allow users to hide the spoiler again if they want to. Just create a second button just like the first one and set its value to none instead of block.

Tags: Hidden Tags