CODEWITHSUNDEEP
javascripthtml
Isus
Isus

Reputation: 143

Toggle visibility for multiple divs for navigation bar

Earlier, I did an assignment where I was supposed to 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. With help from here, I got my code to work. However, my teacher was not pleased over the fact that I used onclick in my HTML-code. So my question is now: How do I move all functionality to javascript, and thereby not use onclick in my HTML?

Note: Of course I gave it a try myself but I cannot make the pairing between header and div work correctly... By the pairing I mean that 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".

I guess I should start something like this:

var left_headings = document.getElementsByClassName("left_top");
for(var k = 0; k < left_headings.length; k++) {
   ??????
}

Earlier related question: Toggle visibility for multiple divs with one function: navigation bar

HTML

 <a class="left_top" onclick = "toggle('.left_submenu_1')">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_top" onclick = "toggle('.left_submenu_2')">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>

Javascript

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

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.

Upvotes: 2

Views: 235

Answers (1)

Remysc
Remysc

Reputation: 187

EDIT: Changing the html was out of the question, updated answer.

Instead of using onclick to handle the event, assign the eventhandler via javascript, like this (Note that I added IDs to the elements in order to be able to select them properly):

jsfiddle: https://jsfiddle.net/pkptn4gf/

<a class="left_top">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_top">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>

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

var clickables = document.getElementsByClassName("left_top");

clickables[0].addEventListener("click", function(){
    toggle('.left_submenu_1');
});
clickables[1].addEventListener("click", function(){
    toggle('.left_submenu_2');
});

Upvotes: 2

Related Questions