0

My Assignment: Hi! I am doing an assignment in school where I am supposed write code in Javascript in order to toggle visibility for the submenus each belonging to their own topmenu in a navigation bar for a webpage. The visibility should be set to hidden by default and should be shown when a topmenu is clicked on. I know how to toggle visibility for ONE submenu belonging to a topmenu, but fail to make my code work for multiple elements. My HTML-code:

        <a class="left_top1" onclick = "toggle()">Opinion</a><br>
            <div class="left_submenu_1" style="display: none;">
            <a class="left_sub1">Leaders</a><br>
            <a class="left_sub1">Debates</a><br>
            </div> 
<br>
            <a class="left_top2" onclick = "toggle()">Economy</a><br>
            <div class="left_submenu_2" style="display: none;">
            <a class="left_sub2">News</a><br>
            <a class="left_sub2">Your Economy</a><br>
            </div>

My Problem: The topmenus I speak of are "Opinion" and "Economy". The visibility of the div with the class "left_submenu_1" should be toggled when you click the topmenu "left_top1". Thus should the visibilily of the div with the class "left_submenu_2" be toggled when you click the topmenu "left_top2". This is what I fail to do. My Javascript code is so far:

function toggle() {
  var e = document.querySelectorAll("div.left_submenu_1, div.left_submenu_2");
  for (var i=0; i < e.length; i++) { // I know this will enable/disable the visibility for ALL elements selected from the querySelectorAll, which should NOT happen
    if(e[i].style.display == "none") {
      e[i].style.display = "block";
    } else if(e[i].style.display == "block") {
      e[i].style.display = "none";
    }
  }
}

Anyone who knows how to solve this issue of mine? I know there are errors in the for-loop (as I wrote next to it), but this is the best I can manage for now.

Please note: We are NOT allowed to use jQuery or to give the topmenus id:s, as the idea is to use one general function to toggle the visibility. Furthermore, the code which enables the toggle-function should be done in Javascript.

Isus
  • 143
  • 2
  • 16

2 Answers2

0

Tring to make it work modifying it as less as possible :
- use onClick="toggle(this)" in the anchors tags
- use a bit different toggle function like:

function toggle (el) {
    var e = document.querySelectorAll('.' + el.className.replace('top', 'submenu_'))[0]; 
    e.style.display =  e.style.display.match(/none/) ? '' : 'none';
}

hope it helps, but I have to suggest You to make a small step forward and search for event delegation. Bye

fedeghe
  • 1,243
  • 13
  • 22
0

I would approach it by passing the class name of the div to be shown (or hidden) into the function to begin with.

HTML

<a class="left_top1" onclick = "toggle('.left_submenu_1')">Opinion</a>

Then in the function you can grab the element and toggle it's display state.

JavaScript

function toggle(qs) {
    var e = document.querySelector(qs);
    e.style.display = e.style.display === 'block' ? 'none' : 'block';
}

The e.style.display === 'block' ? 'none' : 'block' part is saying if the elements display state is equal to block, return none, otherwise return block.

The return value is set as the new element display state due to the e.style.display = beforehand.

spaceman
  • 1,147
  • 8
  • 15
  • Thank you for you help! I think your idea is logic and reasonable and I feel like I understand it, together with your explanation. Unfortunately it´s not working. Now, nothing happens when the topmenu is clicked. Does querySelector work like a nodelist (like document.getElementsByClassName and document.querySelectorAll) that you have to loop through before you "do" anything? – Isus May 01 '16 at 10:41
  • No, it only returns the first element with that selector, `querySelectorAll` returns all elements with the selector. Here is a working [jsfiddle](https://jsfiddle.net/LskxwLur/) to hopefully make it clearer. – spaceman May 01 '16 at 15:07
  • Ok I understand! I think the error was on my behalf as to why nothing happened when I clicked the topmenu. Thanks for the further explanation! jsfiddle made it very clear. Everything works perfectly now, thank you very much! – Isus May 01 '16 at 17:47