Navbar Expands on clicking the menu button but doesnt collapse on clicking it back again.

Question

Navbar Do Expands on clicking the Menu Button on navbar and items are listed but on reclicking the menu button it doesnot collapse back.
https://code.sololearn.com/WLeMAr0dUYK0/?ref=app

Answer 1

Shushang , this is happening because you are using a single = in the if statement.
For comparing the values, use ==.
https://www.sololearn.com/learn/JavaScript/1132/

I also set the list display to none using js as we would have to click twice in the beginning.

https://code.sololearn.com/Wi86SV3g1itv/?ref=app

Answer 2

Just wanna tell that u can shorten your code by using

document.getElementById("").classList.toggle("yourClassName")

So it will keep on toggling it on click if u use an onclick event.

Answer 3

The part of your code shall be looks like:

document.getElementById('toggle').addEventListener('click',() => {
if (document.getElementById('list').style.display == 'none'){
expand()
} else {
collapse()
}

Answer 4

Shushang , the display of the list was set to none using css. Even then, the condition in the function wasn't evaluating true(🙄Idk why). So I set the value to none using js when the body loaded.

If you remove it, collapse function will be called on first click. Making the user click twice. You can remove it and you will see. :D

You could also use a variable and shorten the code:
https://code.sololearn.com/WAFlm624QL7U/?ref=app
That way, you wouldn't have to set the display to none at the end.

Answer 5

Thanks Bro :)

Answer 6

Hey, at the end when you have made list display to none. Why do you do that ? Can you explain it and why you don't include it inside the function ? Really curious to know that :)