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";
  }
});

Does this answer your question? Simple Toggle-able JS Dropdown Menu — Zain ul abideen
– Zain ul abideen, Commented Oct 19, 2020 at 3:11

Eric Echemane · Accepted Answer · 2020-10-19 02:57:15Z

0

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

edited Oct 19, 2020 at 2:57

answered Oct 19, 2020 at 2:51

Eric Echemane

1042 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7245847 Over a year ago

You're right it is better, I did it this way but checked if (!isClicked).

Eric Echemane Over a year ago

Yah, that's right to reduce the code...always remember to create pseudocode or flowchart first at least on you mind to avoid confusion.

BFP · Accepted Answer · 2020-10-19 02:37:02Z

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";
    }
    
    });

Jon P · Accepted Answer · 2020-10-19 03:34:09Z

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
});

Collectives™ on Stack Overflow

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

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related