Collapsing bootstrap dropdown ONLY by clicking on the dropdown bar

Question

<ul class="nav navbar-nav" style="width:100%" />
<li class="dropdown dropdown-lg open" style="width:100%">
  <a href="javascript:;" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="true"><i class="fa fa-th-large fa-fw"></i>Selected Filters<`enter code here`b class="caret"></b></a>
  <div class="dropdown-menu dropdown-menu-lg" style="width:100%">
    <div class="row">
      <div class="col-md-4 col-sm-4">
        <h4 class="dropdown-header">Features<span class="label label-inverse ng-binding">1</span></h4>
        <div class="col-md-6 col-xs-6">
          <ul class="nav">
            <!-- ngRepeat: feature in featuresSelected | orderBy:'attributename' -->
            <li ng-repeat="feature in featuresSelected | orderBy:'attributename'" ng-click="uncheckFeature(feature)" class="ng-scope"><a href="javascript:;" class="text-ellipsis ng-binding"><i class="fa fa-times text-inverse"></i> Customer</a>
            </li>
            <!-- end ngRepeat: feature in featuresSelected | orderBy:'attributename' -->
          </ul>
        </div>
      </div>
      <div class="col-md-4 col-sm-4">
        <h4 class="dropdown-header">Categories<span class="label label-inverse ng-binding">2</span></h4>
        <ul class="nav">
          <!-- ngRepeat: category in categoriesSelected | orderBy:'filterattributevalue' -->
          <li ng-repeat="category in categoriesSelected | orderBy:'filterattributevalue'" ng-click="uncheckCategory(category)" class="ng-scope"><a class="text-ellipsis ng-binding"><i class="fa fa-times text-inverse" style="cursor:pointer;"></i> 3D Printing</a>
          </li>
          <!-- end ngRepeat: category in categoriesSelected | orderBy:'filterattributevalue' -->
          <li ng-repeat="category in categoriesSelected | orderBy:'filterattributevalue'" ng-click="uncheckCategory(category)" class="ng-scope"><a class="text-ellipsis ng-binding"><i class="fa fa-times text-inverse" style="cursor:pointer;"></i> Accounting</a>
          </li>
          <!-- end ngRepeat: category in categoriesSelected | orderBy:'filterattributevalue' -->
        </ul>
      </div>
      <div class="col-md-4 col-sm-4">
        <h4 class="dropdown-header">Locations<span class="label label-inverse ng-binding">1</span></h4>
        <ul class="nav">
          <!-- ngRepeat: location in locationsSelected | orderBy:'filterattributevalue' -->
          <li ng-repeat="location in locationsSelected | orderBy:'filterattributevalue'" ng-click="uncheckLocation(location)" class="ng-scope"><a href="javascript:;" class="text-ellipsis ng-binding"><i class="fa fa fa-times text-inverse"></i> Africa (Guinea-Bissau)</a>
          </li>
          <!-- end ngRepeat: location in locationsSelected | orderBy:'filterattributevalue' -->

Hi, Currently the drop down collapses on clicking anywhere. But I need this to collapse only on clicking "Selected Filters". How do we achieve this?

Thanks in advance

remove **data-toggle="dropdown"** and write your own script.[refer](http://stackoverflow.com/questions/25089297/twitter-bootstrap-avoid-dropdown-menu-close-on-click-inside) — Bugfixer, Oct 01 '15 at 07:39

score 0 · Accepted Answer · answered Oct 01 '15 at 07:52

You can use the bootstrap collapse rather than drop down to achieve this. Try changing your lines 3-4 to be something similar to:

<a href="#collapse-menu" data-toggle="collapse" aria-expanded="true"><i class="fa fa-th-large fa-fw"></i>Selected Filters<b class="caret"></b></a>
<div id="collapse-menu" class="collapse" style="width:100%">

Collapsing bootstrap dropdown ONLY by clicking on the dropdown bar

1 Answers1