Bootstrap & jQuery - Toggle Div based on Bootstrap Dropdown Menu open or close

Question

I want to show a div when Bootstrap Dropdown opens and hide the same when dropdown closes...

FIDDLE

HTML

<ul class="dropdown" id="flatmenu">
  <li data-toggle="dropdown" aria-expanded="true"><a href="#">Dropdown<span class="caret"></span></a></li>
  <div class="dropdown-menu fm-container" role="menu" aria-labelledby="dropdownMenu">
    Dropdown Content
  </div>
</ul>


<div class="show-me">Show Me</div>

CSS

body{width:400px;margin:50px auto;}
ul,li{list-style:none;margin:0;padding:0;}
.show-me{display:none;margin-top:200px;}

jQuery

if($('#flatmenu').hasClass('open')){
    $('.show-me').show('slow');
}else{
    $('.show-me').hide('slow');
}

empiric · Accepted Answer · 2015-04-20 06:50:21Z

2

From the bootstrap-docs:

$('#flatmenu').on('shown.bs.dropdown hidden.bs.dropdown', function () {
  $('.show-me').toggle('slow');
});

Demo

answered Apr 20, 2015 at 6:50

empiric

7,8767 gold badges40 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Reddy Over a year ago

Perfect empiric... Thank you somuch

urbz · Accepted Answer · 2015-04-20 06:50:30Z

1

You could do .click() for the element that it's intended for and use the .toggle() effect for the div that is going to show/hide instead.

Code snippet:

$("#flatmenu").click(function () {
    $('.show-me').toggle('slow');
});

JsFiddle demo

answered Apr 20, 2015 at 6:50

urbz

2,6671 gold badge23 silver badges30 bronze badges

1 Comment

Reddy Over a year ago

@ urbz, Thanks for the Answer ... But in this case, if I click outside of dropdown, div also should close with Dropdown... which is not happening in your expample... Thanks for your time

Amit · Accepted Answer · 2015-04-20 06:52:40Z

0

You can try this updated fiddle

Code:

$('#flatmenu').on('click',function(){
    $this = $(this);
    setTimeout(function(){
        if($this.hasClass('open')){
            $('.show-me').show('slow');
        }else{
            $('.show-me').hide('slow');
        }
    },100);
});

answered Apr 20, 2015 at 6:52

Amit

86710 silver badges18 bronze badges

1 Comment

Reddy Over a year ago

@ Amit, Thanks for your reply... if I click outside of dropdown, div also should close with Dropdown... like "empiric's" solution

Collectives™ on Stack Overflow

Bootstrap & jQuery - Toggle Div based on Bootstrap Dropdown Menu open or close

FIDDLE

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related