OnClick -Dropdown Menu

Question

I have a bit Javascript, which controls the drop down menu when it is on click

<script>
function show_menu(){
    var menu = document.getElementById('dropdown_menu');

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

Here is HTML

<nav>
    <div class="dropdown_button" class="menu_button" onClick="show_menu()">Schedule 1</div>
    <div id="dropdown_menu" class="hidden_menu">
        <ul>
            <li>option 1</li>
            <li>option 2</li>
        </ul>           
    </div>
</nav>

Here is a style

<style>
.hidden_menu{display:none}
</style>

Everything works fine so far, but if I add one more dropdown set into the menu bar, they don't work because ID="dropdown_menu" is for only one element, not for another one.

<nav>
        <div class="dropdown_button" class="menu_button" onClick="show_menu()">Schedule 1</div>
        <div id="dropdown_menu" class="hidden_menu">
            <ul>
                <li>option 1</li>
                <li>option 2</li>
            </ul>           
        </div>

<div class="dropdown_button" class="menu_button" onClick="show_menu()">Schedule 2</div>
        <div id="dropdown_menu" class="hidden_menu">
            <ul>
                <li>option 3</li>
                <li>option 4</li>
            </ul>           
        </div>
    </nav>

How can I solve this problem? please give me a hand. Thanks

Answer 1

As I look at the code, in both places the ID is the same <div id="dropdown_menu" class="hidden_menu">

You should give different IDs for different divs and you can pass some parameter in the JavaScript method to identify the div inside the script.

Answer 2

Try using 'this' :

function show_menu(this){
    var menu = this.firstChild;
    // or 
    // var menu = this.children[0];  

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

<nav>
        <div class="dropdown_button" class="menu_button" onClick="show_menu(this)">Schedule 1</div>
        <div id="dropdown_menu" class="hidden_menu">
            <ul>
                <li>option 1</li>
                <li>option 2</li>
            </ul>           
        </div>

<div class="dropdown_button" class="menu_button" onClick="show_menu(this)">Schedule 2</div>
        <div id="dropdown_menu" class="hidden_menu">
            <ul>
                <li>option 3</li>
                <li>option 4</li>
            </ul>           
        </div>
</nav>

Answer 3

try to send the id as argument of the div you want to show and all ids to unique ones

function show_menu(id)

change your html like this

onClick="show_menu('IdOfTheDiv')"

For EX:

<div class="dropdown_button" class="menu_button" onClick="show_menu('dropdown_menu')">Schedule 1</div>

function show_menu(id){
    var menu = document.getElementById(id);

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