Sub menu hide/show does not workout when click on the parent div

Question

I have this vertical menu:

<li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a>
    <ul style="display:none" class="submenus">
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li> 

And as you can see I have set the display:none for the class submenus and then within this Javascript code I tried to show the sub menu items, when user click on the menu item :

$(document).on('click','#verticalMenu',function(){
    let sbm = document.querySelector(".submenus");
    sbm.style.display = "block";
});

But now this thing does not work out and not shows the sub menu items.

However, I have made sure that the onlick event runs successfully.

I also tried showing the sub menu items like this:

sbm.toggle();

But it says: toggle is not a function

So what's going wrong here? How can I properly hide/show this .submneus class when clicking on the link with id of verticalMenu ?

Answer 1

You are not removing the display block, therefore it will always be shown as soon as you clicked it once. You have to change the display to none again after your first click.

 $(document).on('click','#verticalMenu',function(){ let sbm = document.querySelector(".submenus"); console.log(sbm.style.display) if(sbm.style.display == "block") { sbm.style.display = "none"; } else { sbm.style.display = "block"; } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a> <ul style="display:none" class="submenus"> <li><a href="">Sub menu item 1</a></li> <li><a href="">Sub menu item 2</a></li> </ul> </li>

A more elegant solution is the correct implementation of the toggle function from jquery. I have also styled the cursor for your menu element so there is a visible response when the cursor is on it.

 $(document).on('click','#verticalMenu',function(){ $(".submenus").toggle("100"); //remove the 100ms if you don't want an animation. });

 .vertical_menu_group_item { cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a> <ul style="display:none" class="submenus"> <li><a href="">Sub menu item 1</a></li> <li><a href="">Sub menu item 2</a></li> </ul> </li>

See https://api.jquery.com/toggle/ for more infos.

Answer 2

function Change(){
    let sbm = document.querySelector(".submenus");
     if (sbm.style.display !== "none") {  
                sbm.style.display = "none";  
            }  
            else {  
                sbm.style.display = "block";  
            }  
};

HTML:

<li class="vertical_menu_group_item orange" id="verticalMenu" onClick = Change()><a class="mx-3" >Menu item</a>
    <ul style="display:none" class="submenus">
        <li><a href="">Sub menu item 1</a></li>
        <li><a href="">Sub menu item 2</a></li>
    </ul>
</li> 

Here Try This Its Working

Answer 3

The issue is you are trying to run the jQuery function with help of a javascript element object.

You can use .toggle() like this:

 $(document).on('click', '#verticalMenu', function() { $(".submenus").toggle(); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <li class="vertical_menu_group_item orange" id="verticalMenu"> <a class="mx-3">Menu item</a> <ul style="display:none" class="submenus"> <li><a href="">Sub menu item 1</a></li> <li><a href="">Sub menu item 2</a></li> </ul> </li>

Answer 4

When you use display:none under <ul> tag it completely removes the element in the dom. So when You Inspect it on browser you can't see the code there as it is non existence. Because of that toggle() is not working as the element doesn't exist in DOM and not getting class. That's the reason why it says "toggle is not a function". So instead of using display property, use visibility instead.

<li class="vertical_menu_group_item orange" id="verticalMenu"><a class="mx-3" >Menu item</a>
<ul style="visibility:hidden;height:0px" class="submenus">
    <li><a href="">Sub menu item 1</a></li>
    <li><a href="">Sub menu item 2</a></li>
</ul>

Also set the height to 0px to remove space when using visibility:"hidden" property and height:"auto" when you want to show it.

$(document).on('click','#verticalMenu',function(){
let sbm = document.querySelector(".submenus");
sbm.style.visibility = "visible";
sbm.style.height = "auto";
});