How to Use JavaScript's Toggle Function

We've already worked through how to do this a number of times throughout this course where we have some things like this setup where we had a button and then a div. And then when we click on the button we had the divs visibility toggled and we simply did it by using a class just like this.

large

But so far in this course, we have done it manually so we've had the setup where we would go we would find that component on the page and then we would add a class and then remove a class and then we'd have a conditional where we check to see if the class was in the class name list and then we would swap it out.

And that's fine and there are certain circumstances when you need to do that such as when you have more than two types of behavior that you're wanting to check for. But in the basic example where you simply want to toggle between two classes such as showing and hiding elements that is such a common thing that you're going to be asked to do that JavaScript in the later versions have built that behavior directly into the language. So that's what we're going to walk through in this guide.

So if I switch to the browser you can see right here we have this Toggle Me button

large

and what we're looking for is that whenever we click it we'll have the div show up and then when we click it again it will be hidden because it's going to be simply showing and hiding the elements based on the CSS class. So let's build our first element which is going to be our selector and for this one, I'm gonna use the element by ID because you can see we have that ID right there. So I'll say const heading = document.getElementById and let's pass in the ID of mainHeading.

const heading = document.getElementById('mainHeading')

And so now that we have access to the heading let's also grab access to the button so I'm gonna say const and here I'll just say button(btn) and we'll do the same thing where we do document.getElementById and you can see we have a toggle button ID right there.

large

And so now that we have that now we can add our event listener which we've walked through this a number of times so feel free to go ahead and try to do this before you even watch me do it. And then you can come back when we start the toggle feature but the button is going to have an event listener called addEventListener and we're going listen for the click and then we also are going to pass the click the function.

So we're going to grab the event pass an arrow function and inside of it we are going to go and grab our heading because that's what we're wanting to change then heading.classList.toggle and you can see the toggle functions built directly into the language like that and then what toggle expects is it expects us to pass it whatever the class is that we want to toggle. So, in this case, it's hidden which is the name of our CSS class if you scroll up. So that is all we need to do we can save this file.

large

And now if I switch over to the browser and hit refresh and click on toggle me you can see that our toggle me function is working perfectly.

large

Now before we end this guide let's look at the source code here. So let's see exactly what is happening and let me move this so that it's actually attached to the window. So what I want to look for is that class. So right here you can see that when toggle me has been selected if you come and look at mainHeading you can see there's no class there right here.

large

But if I click on toggle me you can see it adds hidden in.

large

And then if I click on it again it takes it away so that is how that behavior is being implemented. It's exactly what we did when we manually had the conditional built in where we performed our event listener then we checked to see is hidden inside of the class list if it is, then perform this behavior and if not do this.

So what the toggle function allows you to do is to automate that behavior. So any time that you simply have one class that you want to have or to add to the DOM or remove from the DOM then toggles a great way of doing that.

Starter Code

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title></title>
</head>

<style>
  .hidden {
    display: none;
  }
</style>
<body>

  <button id="toggleBtn">Toggle Me</button>

  <div id="mainHeading" class="hidden">
    Hi there
  </div>

</body>

<script>

</script>
</html>

Code

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title></title>
</head>

<style>
  .hidden {
    display: none;
  }
</style>
<body>

  <button id="toggleBtn">Toggle Me</button>

  <div id="mainHeading" class="hidden">
    Hi there
  </div>

</body>

<script>
  const heading = document.getElementById('mainHeading');
  const btn = document.getElementById('toggleBtn');
  btn.addEventListener('click', (e) => {
    heading.classList.toggle('hidden');
  });
</script>
</html>