Show/Hide SubMenu Under Parent Menu With All Links Using JQuery

This Article Was Live On March 11th, 2015 And So Far Have: 0 Comments...
Last Updated on March 11th, 2015

You know that the designer comes with many problem when he is design his work with some third part work so many time you have to do yourself whatever you want and also didn’t have to touch the others codes. Same like this if you got a list menu like shared below by third party that you cant edit but can add your code then you have to do alot but here we are sharing a trick that can do it without touching the list menu code.

<ul class="main_list">
 <li class="parent">
  <a href="##########">Menu-1</a>
   <ul class="children">
    <li><a href="##########">SubMenu-1</a></li>
    <li><a href="##########">SubMenu-2</a></li>
    <li><a href="##########">SubMenu-3</a></li>
   </ul>
 </li>
 <li><a href="##########">Menu-2</a></li>
 <li><a href="##########">Menu-3</a></li>
 <li><a href="##########">Menu-4</a></li>
 <li class="parent">
  <a href="##########">Menu-5</a>
   <ul class="children">
    <li><a href="##########">SubMenu-1</a></li>
    <li><a href="##########">SubMenu-2</a></li>
    <li><a href="##########">SubMenu-3</a></li>
   </ul>
  </li>
</ul>

So lets consider the upper code is the HTML code that you can not edit. You can only edit or add CSS/JavaScript/JQuery. Here you want to hide all children menus and will show on click of there parent menu. But when we click on there parent menu then it goes to the external link that is on parent menu so you also want the parent menu link working too.

So now for this problem, we have an idea to add some text in front to parent menu like show/hide and make some JavaScript to open its children menu and in this case parent menu link will also work if we will click on it directly. Now we can add some text/icon in front of parent menu using Jquery we can’t edit HTML.

Recommended For You:

Custom Web Audio Player With Controls And Playlist Using Vanilla JavaScript

Table of Contents

Show/Hide Sub-Menu Using Text:

Now if you want to add the text in front of your parent menu which will be able to show/hide your sub-menu of that parent menu then here we have a beautifull short code example that you can see where we didnt touch any HTML code as that we shared above. We only added CSS/JQuery and rest is awesome at http://jsfiddle.net/8n3f6om3/.

Show/Hide Sub-Menu Using Image:

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share alot more about coding and make it easy for you. If you liked it then share it and be with us to get next awesome widget. If you have any problem then feel free to ask us. We will help you with what we can or have.

Recommended For You:

How To Resize An Image Using Pure Vanilla JavaScript In Aspect Ratio?