Bootstrap Dropdown in Collapse Not Showing on First Attempt

Bootstrap dropdown in collapse not showing on first attempt

A lot of people were reporting this as a bug on the repo (eg. Issue #5671, Issue #5890, Issue #6019).

In response to #5671, someone points out that as per the docs on responsive Navbar, when using the class navbar-collapse you must also include collapse. Seems that your example suffers from this same (albeit easily overlooked) flaw.

Here's a working example of your code, the only difference being adding the collapse class:

Plunker

unable to collapse using Bootstrap Collapse

You need a <div> around your accordion with a parent ID:

<div class="accordion" id="accordionExample">

And in your .collapse element you need that

 data-bs-parent="#accordionExample"

You already have that. So I guess it's just the missing wrapper.

Bootstrap 3 dropdown animations not showing first time

I have created a demo for yourself: http://jsfiddle.net/e4tzdkLq/4/

$(document).ready(function(){
      //Animation Slideup
      $('.dropdown').on('show.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideDown().delay(200);
      });
      //Animation Slidedown
      $('.dropdown').on('hide.bs.dropdown', function(e){
        $(this).find('.dropdown-menu').first().stop(true, true).slideUp().delay(400);
      });

    $('.dropdown').hover(function(){ 
      $('.dropdown-toggle', this).trigger('click'); 
    });
});

What I did is trigger bootstraps click event with a hover. I think is the best way.

I hope it's helps.

Bootstrap Dropdown menu is not working

Maybe try with

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

and see if it will work.

---

Related Topics