Closing all other DIVS while opening one

Question

What I am trying to achieve is the following

1. There are two DIVS with dropdown. I need to close one while opening the other on click function.

2. I am also trying to mouseout once the event is out of the dropdown box.

3. I would like to close the DIV once the click even happens outside the dropdown box.

Following is the HTML

<div class="first-div" style="display:inline-block">
<a class="first-div-link"><h6>REGION</h6></a>
        <div class="first-div-dropdown">
            <p>Drop down test from first DIV</p>
        </div>
</div>

<div id="second-div" style="display:inline-block; float:right">
    <a href="#" class="second-div-link"><h6>REGISTER</h6></a>
        <div class="second-div-dropdown">
            <p>Drop down test from second DIV</p>
        </div>  
</div>

CSS is following

.first-div-dropdown, .second-div-dropdown{
    background-color:#555;
    color:white;
    height:100px;
    width:200px;
}

JS is following

$(document).ready(function(){
    $('.first-div-dropdown').hide();
    $('.second-div-dropdown').hide();

    $('.first-div-link').on('click', function (event){
        $('.first-div-dropdown').slideDown(300);
    });

    $('.second-div-link').on('click', function (event){
        $('.second-div-dropdown').slideDown(300);
    });

});

Is there any way to use this as a function to control multiple DOMs in the HTML? If so could someone assist me with the current example ?

Thanks

Answer 1

The path to follow here is use a common class on your items, you don't need to create new classnames if all will have the same styles and will perform the same action. Check this:

 $(document).ready(function() { $('.cont-div').on('click', 'a', function(e) { e.preventDefault(); $('.div-dropdown').slideUp(300); $(this).next('.div-dropdown').stop().slideToggle(300); }); //To close if you click outside the container divs $('body').on('click', function(e) { if (!$(e.target).parents('.cont-div').length) { $('.div-dropdown').slideUp(300); } }) }); 

 body { height: 600px; background: #e1e1e1; } .cont-div { display: inline-block; vertical-align: top; width: 50%; } .div-dropdown { background-color: #555; color: white; height: 100px; width: 200px; display: none; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="cont-div"> <a href="#"><h6>REGION</h6></a> <div class="div-dropdown"> <p>Drop down test from first DIV</p> </div> </div><!-- --><div class="cont-div"> <a href="#"><h6>REGISTER</h6></a> <div class="div-dropdown"> <p>Drop down test from second DIV</p> </div> </div> 

Answer 2

If you want to get more specific, you could assign a similar class to both menus, in the case below, I added 'dropdown-div' to the class for both menus and then simply added a trigger whenever you click on something that is not a link, it will hide the menus by calling $('.dropdown-div').hide();

 $(document).ready(function(){ $('.first-div-dropdown').hide(); $('.second-div-dropdown').hide(); $('.first-div-link').on('click', function (event){ $('.first-div-dropdown').slideDown(300); }); $('.second-div-link').on('click', function (event){ $('.second-div-dropdown').slideDown(300); }); }); $(document).on('click', function(event) { if (!$(event.target).closest('a').length) { $(".dropdown-div").hide(); } }); 

 .first-div-dropdown, .second-div-dropdown{ background-color:#555; color:white; height:100px; width:200px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="first-div " style="display:inline-block"> <a class="first-div-link"><h6>REGION</h6></a> <div class="first-div-dropdown dropdown-div"> <p>Drop down test from first DIV</p> </div> </div> <div id="second-div" style="display:inline-block; float:right"> <a href="#" class="second-div-link"><h6>REGISTER</h6></a> <div class="second-div-dropdown dropdown-div"> <p>Drop down test from second DIV</p> </div> </div> 

Answer 3

You're dealing with state management within a collection. You have 2 dropdowns, but 3 states: dropdown one's state, dropdown two's state, and the collection of dropdowns' state.

Using jQuery, the most common way of handling this I've seen is to start by "resetting" the collection's state each time, by hiding all dropdowns on click.

Then, open the dropdown that is being targeted by the client. This can also be a bit easier if you use a single class to target the collection which also lends itself to be reusable across an infinite number of dropdowns.

<div class="first-div" style="display:inline-block">
    <a class="dropdown-trigger"><h6>REGION</h6></a>
    <div class="dropdown-menu">
        <p>Drop down test from first DIV</p>
    </div>
</div>

<div id="second-div" style="display:inline-block; float:right">
    <a class="dropdown-trigger"><h6>REGION</h6></a>
        <div class="dropdown-menu">
            <p>Drop down test from second DIV</p>
        </div> 
</div>

JS:

$('.dropdown-trigger').click(function (event) {
    event.stopPropagation();
    var $menu = $(this).siblings('.dropdown-menu');
    $('.dropdown-menu').not($menu).slideUp(300);
    $menu.slideToggle(300);
});


$(document).click(closeDropdowns);

function closeDropdowns () {
    $('.dropdown-menu').slideUp(300);
}

Working codepen: http://codepen.io/amishstripclub/pen/wzbEVo

Answer 4

You could try using toggle like this:

$(document).ready(function(){
  $('.first-div-link').on('click', function (event){
    $('.first-div-dropdown').toggle();
    $('.second-div-dropdown').toggle();
  });

  $('.second-div-link').on('click', function (event){
    $('.first-div-dropdown').toggle();
    $('.second-div-dropdown').toggle();
  });
});