Javascript and jquery script only changes class once

Question

I'm creating a webpage for school home work and I'm making a dropdown into a nav, to show it I use javascript and jquery but it only works once, I can open the dropdown but I cannot close it.

I've tried bunch of ways to do this like using only javascript, or using toggle class but it didn't work

<nav id="logged">
  <a href="#" id="yname" name="yname"> Your Name <i class="fa fa-caret- 
  down"></i></a>
  <ul id="dropdowncontent" class="dropdown-content">
   <li href="#">Action</li>
   <li href="#">Another action</li>
   <li href="#" class="logout">Logout</li>
  </ul>
</nav>

var x = 0;
if (x == 0){
$("#yname").click(function(){
$("#dropdowncontent").removeClass("dropdown-content");
$("#dropdowncontent").addClass("dropdown-content-show");
var x = 1;
});
}

else {
$("#yname").click(function(){
$("#dropdowncontent").removeClass("dropdown-content-show");
$("#dropdowncontent").addClass("dropdown-content");
var x = 0;
});
}

.dropdown-content-show {
    display: block;
}

.dropdown-content {
    display: none;
}

I expected to show dropdown and hide dropdown but it only shows

Answer 1

You only ever assign the first click handler. Consider the logic of these two lines of code:

var x = 0;
if (x == 0){

The variable x will always equal 0 in that condition. Because it was explicitly set to 0 immediately before checking it.

Put the conditional logic inside the click handler, instead of conditionally creating the handler. Something like this:

var x = 0;

$("#yname").click(function(){
    if (x == 0) {
        $("#dropdowncontent").removeClass("dropdown-content");
        $("#dropdowncontent").addClass("dropdown-content-show");
        x = 1;
    } else {
        $("#dropdowncontent").removeClass("dropdown-content-show");
        $("#dropdowncontent").addClass("dropdown-content");
        x = 0;
    }
});

(Note also the removal of var when re-assigning the variable. That was creating a new variable within that scope, which isn't what you want.)

Though logically you should be able to simplify this to something like:

$("#yname").click(function(){
    $("#dropdowncontent").toggleClass("dropdown-content");
    $("#dropdowncontent").toggleClass("dropdown-content-show");
});

Answer 2

First of all, dont use X as a conditional like that. Instead of using X and changing its value if the user has clicked, you should make use of the classList.contains() method. You should also be handling the condition after the event.

Basically, the code should be handled like this:

$("#yname").click(function(){
    if($("#dropdowncontent").classList.contains("dropdown-content")){
        $("#dropdowncontent").classList.remove("dropdown-content")
        $("#dropdowncontent").classList.add("dropdown-content-show")
    } else {
        $("#dropdowncontent").classList.add("dropdown-content")
        $("#dropdowncontent").classList.remove("dropdown-content-show")
    }
}

This is a decent improvement over your code, but still very goofy. If you want to advance in JavaScript, just learn the language. There are no shortcuts like jQUery, just learn JS and then move on to something like React JS

Answer 3

Replace

<a href="#" id="yname" name="yname"> Your Name <i class="fa fa-caret- 
  down"></i></a>

with:

<a href="#" id="yname" name="yname" onclick="toggleFunction()"> Your Name <i class="fa fa-caret- 
    down"></i></a>

and inside js script add this:

function toggleFunction() {
var element = document.getElementById("dropdowncontent");
element.classList.toggle("dropdown-content");}

Demo: https://codepen.io/endritspahiu/pen/oNNyaMQ