Styling application in JavaScript

Let's make a button, by clicking on which the element will be either shown or hidden. Let the element be hidden by default (this is implemented using display: none), and it will be shown by adding the class active . This class will be either added or removed using classList.toggle:

<button id="button">click me</button> <div id="elem"></div> #elem { display: none; width: 200px; height: 200px; border: 1px solid green; } { display: block; } let button = document.querySelector('#button'); let elem = document.querySelector('#elem'); button.addEventListener('click', function() { elem.classList.toggle('active'); });