Javascript: How to create a dropdown effect? (Without JQuery)

Question

At the moment when the menu button is clicked the dropdown displays, however, clicking the button once more does not hide the dropdown menu as it should.
Script.js
//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];

var isClicked = false;

// Drop down Mobile
menuBtn.addEventListener('click', function () {
  if (isClicked == false) {
    //Btn Styles
    menuBtn.style.backgroundColor = "none";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "none";
  } else {
    isClicked = true;
    //Btn Styles
    menuBtn.style.backgroundColor = "#1f283b";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "block";
  }
});

Eric Echemane · Accepted Answer

it is better to change the content of your 'if block statement' to
display the dropdown  since the initial value of isClicked is false. After clicking the button then isCliked must be updated to true since you clicked it. Then the else block will contain the code for
hiding the dropdown then update the isClicked variable to false.
isClicked = false;

// inside the event listener
if(isClicked==false){
    //show dropdown
    isClicked = true;
}else{
    //hide dropdown
    isClicked = false;
}

you can also use jquery Library and use toggle() function

Jon P · Answer

You'd be better off using CSS, toggling a class on and off. With this approach you could then also leverage CSS Transitions.

var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];

menuBtn.addEventListener("click", function() {
  this.classList.toggle("active");
  dropdown.classList.toggle("active");
});

.dropdown__menu {
  /*display: none;*/
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.26s ease;
}

.dropdown__menu.active {
  /*display: block;*/
  transform: scaleY(1);
}

#menu__icon {
  transition: all 1s;
}

#menu__icon.active {
  background-color: #1f283b;
  color: #FFF;
}

<button id="menu__icon">Click Me</button>
<div class="dropdown__menu">I'm a menu</div>

If you really want to keep the style in the javascript, invert the isClicked variable in one spot.

//Variables
var menuBtn = document.getElementById('menu__icon');
var dropdown = document.getElementsByClassName('dropdown__menu')[0];

var isClicked = false;

// Drop down Mobile
menuBtn.addEventListener('click', function () {
  if (!isClicked) {
    //Btn Styles
    menuBtn.style.backgroundColor = "none";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "none";
  } else {
    //Btn Styles
    menuBtn.style.backgroundColor = "#1f283b";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "block";
  }
  //Invert true/false
  isClicked = !isClicked
});

BFP · Answer

set isClicked to true in the first if statement then false in the other.
    //Variables
    var menuBtn = document.getElementById('menu__icon');
    var dropdown = document.getElementsByClassName('dropdown__menu')[0];

var isClicked = false;

// Drop down Mobile
    menuBtn.addEventListener('click', function(){
    
    if (isClicked == false) {
    //Btn Styles
    menuBtn.style.backgroundColor = "none";
    menuBtn.style.color = "black";
    //Menu visible
    dropdown.style.display = "none";
    isClicked = true
    } else {
        isClicked = false;
        //Btn Styles
        menuBtn.style.backgroundColor = "#1f283b";
        menuBtn.style.color = "black";
        //Menu visible
        dropdown.style.display = "block";
    }
    
    });

Javascript: How to create a dropdown effect? (Without JQuery)

3 Answers

Add your own answers!

Ask a Question