Hidden Tags.
When first learning about the CSS display attributes, I thought that they would not be very useful. Especially the none value. I thought to myself what is the purpose of coding something that you don’t want to be displayed. I was completely wrong by thinking that. We are going to look at how we can use the display attribute, and a little bit of JavaScript to create an element that will hide information until the end user interacts with another element to display the hidden information.
You may have seen this type of effect on sites that review movies, or video games. With a little JavaScript code, we can create an effect that will hide spoilers from users who don’t want key parts of the movie or video game. The first thing we need to do is create a class for the spoiler information, and apply a style to that class. We are also going to create a class for the “button” that the user will click to display the spoiler.
.spoiler{
display: none;
width: 25%;
margin: 1%;
}
.spoiler_button{
border: outset #E4E4E4;
background-color: #E4E4E4;
}
Now that we have that finished, we can go ahead and create the HTML elements with the JavaScript that will allow us to create the effect.
<span class=”spoiler_button” onclick=”document.getElementById(’spoiler’).style.display = ‘block’”>Show Spoilers</span>
If you know about JavaScript events, you can tell we are using the onclick event. If you don’t know about JavaScript events, what this event does, is when the element is clicked the value of that element is activated. In this case we are changing the style of the element that has the HTML ID of spoiler. What we are changing is the value set to the display attribute, and changing the value to block. This value will allow us to show the element on the page now.
Finally we need to create the element that contains the spoiler information. This element is going to be a div tag, which will have it’s class and id values set to spoiler. Here is that tag.
<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>
This is a simple code that will allow you to create a very useful effect, and add a Web 2.0 feel to your site also. If you also want to allow the user to hide the spoiler again, all you have to do is create a second “button” just like the show spoiler but instead of setting the display value to block, set the value back to none.
Below is an example of the code.
Show Spoilers