CSS Challenge: Hide and Reveal
Toggling Classes to Uncover Secret Elements
When you want to hide something… but show it sometimes
This article was inspired by Codepen’s recent weekly code challenge. The theme for their code challenges for this month was micro-interactions. There are many situations where you might want to hide and later reveal an element on the DOM based on user actions.
For example, you might want to hide a form or you might want to hide some instructions or additional information in a tooltip to better inform users about form fields or other elements within the DOM. For single-page applications, it can be especially important to preserve valuable screen space. Easter eggs are another great example. They are like fun hidden treasures, typically in games, for the end-user to find as a surprise. Let’s look at a couple of ways we can reveal things by referring to their CSS class.
Toggle
If you have an image or some text that you’d like to elaborate on, you can use this method to expand a paragraph below. Wrapping elements in a div, we can use a JavaScript event listener and trigger a change of class that sets the hidden element to show. The paragraph is initially set to the ‘hidden’ class which covers up the element by simply assigning the font size to zero. When the user clicks on the div, the showSurprise function is triggered which toggles the paragraph’s class from ‘hidden’ to ‘surprise’. The surprise class assigns the font size to 32px, so it’s now visible. Note that because we are using the toggle method, clicking on the div again will hide the paragraph again. This is a super-easy way to conditionally render any text within a div. In fact, this would be a great way to implement a hidden form as well.
Z-index
In my previous article Perfect CSS Positioning, I introduced the concept of the z-index. Let’s discuss how the z-index helps us hide and reveal things. As you can see in the code above, clicking and holding down on the image causes a completely different image to appear. The first image is not gone, it’s just trading places with an image that is behind it. I like to compare this to working with layers in Photoshop. When images share the same position in the browser, whichever element has a greater z-index will be placed on top of the other(s). You could stack multiple elements on top of each other and it doesn’t strictly apply to images. In the example above, the user causes a toggle between the class assignment (like in our first example)which defines a new z-index.
Navigation
This last example shows how you can open and close a navigation bar with user interactions. If you click on the eye icon, the navigation links will ‘magically’ appear below. This feature is a great way to give your application a modern feel. An event listener is set up on the icon and when triggered, the ul element is assigned to the show class.
Further Exploration
There are a million ways that you can leave elements hidden until they are needed. You can explore more on the codepen.io website. While you’re there, be sure to subscribe to the coding challenges for invites and details of future competitions. It’s a great way to continue practicing CSS and learn about different ways to manipulate styling from other developers.
