JSFiddle - React, Tailwind, and code Playground

by Ivan Ferrer

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<ul class="nav nav-pills" role="tablist"> <li role="presentation" class="active"><a href="#">Regular link</a></li> <li role="presentation" class="dropdown open opened"> <a id="drop4" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="true"> Dropdown <span class="caret"></span> </a> <ul id="menu1" class="dropdown-menu" aria-labelledby="drop4"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li role="presentation" class="dropdown opened"> <a id="drop5" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul id="menu2" class="dropdown-menu" aria-labelledby="drop5"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> <li role="presentation" class="dropdown opened"> <a id="drop6" href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false"> Dropdown <span class="caret"></span> </a> <ul id="menu3" class="dropdown-menu" aria-labelledby="drop6"> <li><a href="#">Action</a></li> <li><a href="#">Another action</a></li> <li><a href="#">Something else here</a></li> <li role="separator" class="divider"></li> <li><a href="#">Separated link</a></li> </ul> </li> </ul>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true"> <div class="panel...

CSS

html, body{
height: 100%;
}

JavaScript

$(function() {

$('.dropdown.opened')
 .on({
      "shown.bs.dropdown": function() { this.closable = ($('.dropdown.open').length > 1) ? true : false },
      "click": function() { this.closable = true; 
       $('.dropdown.opened.open').trigger('click');
    },
     "hide.bs.dropdown":  function() { return this.closable; }
  });
});