Menu Expand and Collapse

Question

I want to be able to expand and collapse Manu Nav on my company website such as when someone is using a Mobile device to access my website, if click on Nav Icon it opens at the front of my company website where you will see the same Manu Nav that was hidden unless when click Nav Icon on a mobile device and Manu Nav appears, which works fine.

But someone clicks on li tags it expand the contains of the li tags which ul tags inside li tags, like when i have Domains and under it i have, Single Domain Register, Bulk Domain Register, Transfer Domains, New TLDs in desktop device when you hover over it shows this contains and in mobile device when you click on Manu Nav Icon it opens the Domains, Hosting, etc.

So what i want to do is when someone clicks on Domains it slides down its contains and if click on Hosting its slides up the Domains contains and slides down the Hosting contains.

Here is what i have so far:

 $(document).ready(function() { $(".parents-toggle > li a").click(function () { $(".parents-toggle > div.menu-toggle").not($(this).siblings()).slideUp(); $(this).siblings(".menu-toggle").slideToggle(); }); }); 

 .hidden { display: none; } 

 <div class="parents-toggle"> <li> <a href="#" id="domain-toggle">Domains</a> <div class="menu-toggle hidden" id="domain-menu"> <div class="menu-toggle-one"> <ul> <li><a href="http://www.domain.com/domain">Simple Domain Search</a></li> <li><a href="http://www.domain.com/index.php?m=newtlds">New TLDs</a></li> <li><a href="http://www.domain.com/domainchecker.php?search=bulkregister">Bulk Domain Search</a></li> <li><a href="http://www.domain.com/domainchecker.php?search=bulktransfer">Bulk Domain Transfer</a></li> </ul> </div> </div> </li> </div> <div class="parents-toggle"> <li> <a href="#" id="domain-toggle">Hosting</a> <div class="menu-toggle hidden" id="domain-menu"> <div class="menu-toggle-one"> <ul> <li><a href="Hosting/Shared">Shared Hosting</a></li> <li><a href="Hosting/VPS">VPS Servers</a></li> <li><a href="Hosting/Reseller">Reseller Hosting</a></li> <li><a href="Hosting/Dedicated">Dedicated Servers</a></li> </ul> </div> </div> </li> </div> 

But when clicks nothing shows up can someone please let me know what might be the problem what is missing and what do i need to add to make it work my company website can be found here: https://www.domain.com if my question is confusing let me know.

Thanks

Answer 1

You shouldn't have 2 elements with the same id eg. id="domain-menu" , that's what classes are for.

$(document).ready(function () {
  $(".menu-toggle").hide();
  $(".parents-toggle > li a").click(function () {
      $(this).parents('.parents-toggle').siblings().find('.menu-toggle').slideUp();
      $(this).siblings(".menu-toggle").slideToggle();
    });
});

will do what you're after without any side-effects such as being unable to close a menu.

Note: example also hides the menu-toggles on load rather than using custom hidden class + css

Edit : jsFiddle

Answer 2

Change your JS to Following, It will close first drop-down if second opens.

$(document).ready(function() { 
    $(".parents-toggle > li a").click(function () {
       //$(".parents-toggle > div.menu-toggle").not($(this).siblings()).slideUp();
       $(".parents-toggle").siblings().find('.menu-toggle').slideUp();
       $(this).siblings(".menu-toggle").slideToggle();
    });
});

HTML

<div class="parents-toggle">
    <li><a  href="#" id="domain-toggle">Domains</a>
        <div class="menu-toggle hidden" id="domain-menu">
            <div class="menu-toggle-one">
                <ul>
                    <li><a  href="http://www.domain.com/domainchecker.php">Simple Domain Search</a></li>
                    <li><a  href="http://www.domain.com/index.php?m=newtlds">New TLDs</a></li>
                    <li><a  href="http://www.domain.com/domainchecker.php?search=bulkregister">Bulk Domain Search</a></li>
                    <li><a  href="http://www.domain.com/domainchecker.php?search=bulktransfer">Bulk Domain Transfer</a></li>
                </ul>
            </div>
        </div>
    </li>
</div>

<div class="parents-toggle">
    <li><a href="#" id="domain-toggle">Hosting</a>
        <div class="menu-toggle hidden" id="domain-menu">
            <div class="menu-toggle-one">
                <ul>
                    <li><a href="Hosting/Shared">Shared Hosting</a></li>
                    <li><a href="Hosting/VPS">VPS Servers</a></li>
                    <li><a href="Hosting/Reseller">Reseller Hosting</a></li>
                    <li><a href="Hosting/Dedicated">Dedicated Servers</a></li>
                </ul>
            </div>
        </div>
    </li>
</div>

CSS

.hidden {
    display: none;
}

Fiddle