Toggle Visibility For Multiple Divs With One Function: Navigation Bar

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 topmen

Solution 1:

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.

Solution 2:

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