I'm trying out JS without jQuery. But so far it's much harder.

I'm trying to make a toggle on & off function.

This is the function:

function toggleDropdown(){

   var dropdown = document.getElementById('games-dropdown')

   if (dropdown.display = "none"){
    dropdown.style.display = 'block';
   } else {
    dropdown.display = "none";
   }
}

I call the function here:

<li class="dropdown"><a onclick="toggleDropdown()">GAMES</a></li>

I'm trying out JS without jQuery. But so far it's much harder.

I'm trying to make a toggle on & off function.

This is the function:

function toggleDropdown(){

   var dropdown = document.getElementById('games-dropdown')

   if (dropdown.display = "none"){
    dropdown.style.display = 'block';
   } else {
    dropdown.display = "none";
   }
}

I call the function here:

<li class="dropdown"><a onclick="toggleDropdown()">GAMES</a></li>

• javascript
• dom
• onclick
• toggle

Share Improve this question Follow asked Sep 28, 2018 at 13:13 Dario Sanchez MartinezDario Sanchez Martinez 15711 gold badge22 silver badges1212 bronze badges 2

• A CSS Class would be so much easier. dropdown.classList.toggle("enabled") – epascarello Commented Sep 28, 2018 at 13:21
• Ah, I see! Thanks, checked it! – Dario Sanchez Martinez Commented Sep 28, 2018 at 13:56

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You're not being consistent about using the style object, you're checking and sometimes setting display directly on dropdown.

You're also using = instead of == for parison. = is for assignment, not parison.

So the minimal change is:

function toggleDropdown(){

   var dropdown = document.getElementById('games-dropdown')

   // ----------vvvvv    
   if (dropdown.style.display == "none"){
   // ------------------------^^
     dropdown.style.display = 'block';
   } else {
     dropdown.style.display = "none";
   // --------^^^^^^
   }
}

However, I wouldn't use style at all. I'd use a class that hides the element, which you add and remove:

.hidden {
    display: none;
}

and

function toggleDropdown(){
   document.getElementById('games-dropdown').classList.toggle("hidden");
}

Example:

function toggleDropdown(){
   document.getElementById('games-dropdown').classList.toggle("hidden");
}

.hidden {
      display: none;
  }

<li class="dropdown"><a onclick="toggleDropdown()">GAMES</a></li>
<div id="games-dropdown">
games-dropdown
</div>

You can also make your function more generic by accepting a selector for the element to show/hide:

function toggleDropdown(selector) {
   document.querySelector(selector).classList.toggle("hidden");
}

.hidden {
      display: none;
  }

<ul>
  <li class="dropdown"><a onclick="toggleDropdown('#games-dropdown')">GAMES</a></li>
  <li class="dropdown"><a onclick="toggleDropdown('#games-dropdown2')">GAMES2</a></li>
</ul>
<div id="games-dropdown">
games-dropdown
</div>
<div id="games-dropdown2">
games-dropdown 2
</div>

I used querySelector rather than getElementById so you could use other forms of identifying the element, but of course use getElementById if ou prefer.

You can use classList.toggle function. When the class is visible you can show the tag if not you can hide it.

var dropdown = document.getElementById('games-dropdown').classList.toggle('someClass')

You are assigning the value rather than paring the value to style element

 <div id='games-dropdown'> Your Dropdown </div>

    <li class="dropdown"><a onClick="toggleDropdown()">GAMES</a></li>

    <script>
    function toggleDropdown(){

       var dropdown = document.getElementById('games-dropdown')

       if (dropdown.style.display == "none"){
        dropdown.style.display = 'block';
       } else {
        dropdown.style.display = "none";
       }
    }
    </script>