Tutorial: Toggling Hidden Forms in Vanilla JavaScript
Tags: webdev, javascript, tutorial
Published: 2020-07-08 14:56:11

## 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](https://github.com/stephaniezou1/Movies-You-Missed-Frontend).

### 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](https://semantic-ui.com/), a CSS library. I developed the backend with Ruby on Rails which seeds its data from an external API, [the Movie Database (TMDb)](https://www.themoviedb.org/).

![GIF of app](https://media.giphy.com/media/XDuwHNbuerhETzLNKN/giphy.gif)

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](https://github.com/stephaniezou1/Movies-You-Missed-Frontend) 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.

{% gist https://gist.github.com/stephaniezou1/4b07ca778cbd3463609bb14935e2fbcb %}

### 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.

{% gist https://gist.github.com/stephaniezou1/1675b60950f632d9546e2ec5f0f31c87 %}

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.

{% gist https://gist.github.com/stephaniezou1/75c53654e6aa2d58086ddd56fe7b39a8 %}

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:

{% gist https://gist.github.com/stephaniezou1/3db32503d8579a1328298db630fee34e %}

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! 😊