2

When click on bootstrap button a list should be opened, but it doesn't respond on the click.

<div class="btn-group" dropdown>
  <button type="button" class="btn btn-info">test</button>
  <button type="button" class="btn btn-info dropdown-toggle">
    <span class="caret"></span>
    <span class="sr-only">Split button!</span>
  </button>

  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a>
    </li>
    <li><a href="#">Another action</a>
    </li>
    <li><a href="#">Something else here</a>
    </li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a>
    </li>
  </ul>
</div>

code:
http://jsfiddle.net/Fanadka/r0sfvrcz/

Any idea?

kimo
  • 1,864
  • 5
  • 23
  • 29
  • in addition to @adeneo solution, we should change the order of the files as below: instead of having bootstrap before http://stackoverflow.com/questions/22658015/bootstrap-wont-detect-jquery-1-11-0-uncaught-error-bootstraps-javascript-re – kimo Dec 12 '15 at 20:37

1 Answers1

1

Firstly, you have to include jQuery in your fiddle.

Secondly, you're missing the connection between the button and the dropdown, you'll should add an ID and some aria tags, like this

<div class="btn-group dropdown">
    <button type="button" class="btn btn-info">test</button>
    <button type="button" class="btn btn-info dropdown-toggle" id="mydp" data-toggle="dropdown" aria-haspopup="true" >
        <span class="caret"></span>
        <span class="sr-only">Split button!</span>
    </button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="mydp">
        <li><a href="#">Action</a>
        </li>
        <li><a href="#">Another action</a>
        </li>
        <li><a href="#">Something else here</a>
        </li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a>
        </li>
    </ul>
</div>

FIDDLE

adeneo
  • 312,895
  • 29
  • 395
  • 388