When one dropdown is opened close another

2 Views

I have 2 drop-down menus for a mobile responsive site, one is for blog categories and another for a drop-down search box. These work fine but when you open one, then another it can look a little messy. I have been looking for something that when one is open and a user clicks to open another, listen out and close it. I have had a research and i have found that most functions use ‘parent’ and ‘child’ but not sure how it can apply to my snippet of code. I have also looked into removing classes but nothing seems to do the trick. If anyone has any suggestions to my problem i’d be grateful.

HTML

Read More
<div id="nav-mobile-responsive"><!--Mobile Navigation-->
        <div class="categories-mobile-responsive">
            <ul id="nav-1">
                <li>
                  <h3></h3>
                    <ul>
                        <?php wp_list_categories('&title_li=') ?>
                    </ul>
                </li> 
           </ul>        
        </div> 
        <div class="searchbar-mobile-responsive">
            <ul id="nav-2">
                <li><h3></h3>
                    <ul>
                        <form method="get" id="searchform-mobile" action="<?php echo home_url( '/' ); ?>">
                        <div id="search-inputs">
                        <input type="text" value="" name="s" id="search-box" placeholder="SEARCH" />
                        <input type="hidden" name="ref_url" value="<?php esc_url($_SERVER['REQUEST_URI'])?>">
                        </div>
                        </form>
                    </ul>
                </li> 
           </ul>        
        </div> 
    </div>

Javascript to toggle both drop-downs for mobile and small screens: 

$('.categories-mobile-responsive,.searchbar-mobile-responsive').click(function(){
                $(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle();
            });

$("#searchform-mobile").click(function(event){ event.stopPropagation(); });
Post Views: 2

Related posts

Leave a Reply

1 comment

  1. Before $(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle();, just slideUp all the other drop down menus.

    $('.categories-mobile-responsive,.searchbar-mobile-responsive').click(function(){
    $(this).siblings().find('ul ul').slideUp();
    $(this).find('ul#nav-1,ul#nav-2').find('ul').slideToggle();
});

    Extra: Some bits of code are unnecessary and can be optimized (unless you havn’t provided the entire HTML structure – in which case this may break it):

    $('nav-mobile-responsive div').click(function(){ //only one selector
    $(this).siblings().find('ul ul').slideUp();
    $(this).find('ul ul').slideToggle(); //only call .find() once
});

    Source(s)

    jQuery API – .slideUp()
    jQuery API – .siblings()