A Brief Introduction
In this tutorial, I will walk through how you can use vanilla JavaScript and CSS to hide HTML elements and build a toggling click feature to unhide them without breaking any code!
For demonstration purposes, I refer to a JS web application I recently developed. If you’re curious, you can find the full repo here.
About the project
We’ve all had movie nights where the following scenarios take place: either you spend too much time picking a movie and you end up staying up super late to finish it or, after intensely googling reviews, you decide on a critically-acclaimed movie but it really misses the mark. Critics loved it, but you found it unpalatable.
I created a movie recommendations platform meant to be shared among friends and family so it creates a more curated selection of movies for you to choose from. The frontend was built using object-oriented vanilla JavaScript and styled with Semantic UI, a CSS library. I developed the backend with Ruby on Rails which seeds its data from an external API, the Movie Database (TMDb).
Visitors can post likes and comments that are associated with each movie. The movies are displayed as rows of cards that contain tons of information about the movie, including a hidden comments field for users to see other comments and submit their own.
Now let’s get started on building out the feature!
Step 0. The Setup
You should be working in a JavaScript file, and you only need three components and an index.html file to get this toggling feature in place. First, a file where you declare all of your global variables. Second, a file where you can code your event listener for the click event. Third, a CSS file to hide the comment class. I’m linking my GitHub here if you want to look around the code to better your understanding of the setup.
Here’s a gist of my index.html file so you can see all of the script tags in the <head> of the file, which are pretty important for rendering each component.
Step 1. Declare a global boolean variable
I’m using object-oriented JavaScript so for organizational purposes I’ve kept all my global variables in a file named variable.js, but you can declare your global variables in the same files where you’ve declared your classes.
We’re setting the value of addComment to “false”. This value will be toggled between “false” and “true” to hide and unhide the comments.
Step 2. Build an event listener
In the file that you’ve built out the button or text where you want the toggling feature to take place, add your event listener. For me, it’s in my movie.js file where I declared my Movie class. I’ve styled each of my movies into Semantic UI cards with a comment icon on the left-hand side so I’ll be adding my event listener there.
Grab that HTML tag and add on the event listener for a “click” event.
To explain this code in more detail…
On line 2, you’re toggling the boolean value of addComment. If it was false, it’s now true.
On lines 3 to 9, these two conditional statements are either hiding or unhiding the comments and comment form depending on the boolean value of addComment.
Step 3. Add in the CSS
If you’re coding along right now, you may have noticed that when the page initially renders, the comments and form (or whatever you’re hiding in your code) is not hidden! This last step fixes that.
In your CSS file, add in the following code:
I used an ID selector # to grab my two HTML elements for comments and comments form, but you are welcome to use class names, denoted by a period ., or any other HTML selector.
Concluding Words
Ta-da, it should work now! You’ve successfully developed a feature that hides your comments, forms, etc. and toggles them into visibility using simple JavaScript and CSS. I hope you enjoyed reading about it! 😊
Top comments (0)