CODEWITHSUNDEEP
javascripttwitter-bootstrap
Grasume
Grasume

Reputation: 106

Bootstrap Multiple Dropdown Issue

I Have made the Multiple Drop-down menus Dynamicly but my issue arrises that only the First dropdown menu populates no matter which button is pushed. I can verify in Chrome Console that the information is different in each button dropdown. I have made this Jsfiddle (http://jsfiddle.net/aq9Laaew/34739/) as a test and the Issue still occurs.

<button class="btn btn-secondary dropdown-toggle" type="button" id="371390773" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="toggle">test 1 button</button>
<div class="dropdown-menu" aria-labelledby="371390773">test1</div>


<button class="btn btn-secondary dropdown-toggle" type="button" id="371116034" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="toggle">test 2 button</button>
<div class="dropdown-menu" aria-labelledby="371116034">test2</div>


<button class="btn btn-secondary dropdown-toggle" type="button" id="371078302" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" data-reference="parent">test3 button</button>
<div class="dropdown-menu" aria-labelledby="371078302">test3</div>

Upvotes: 0

Views: 1867

Answers (1)

DC.Azndj
DC.Azndj

Reputation: 1396

You forgot to wrap the <button> and <div> inside <div class="dropdown">. It should look like the following:

<div class="dropdown">
    <button class="btn btn-secondary dropdown-toggle" ... >test 1 button</button>
    <div class="dropdown-menu" ... >test1</div>
</div>

See Bootstrap docs. Here's the jsfiddle I've corrected using your original example.

Upvotes: 1

Related Questions