title: How to open Bootstrap dropdown programmatically
body: <p>I'm trying to open a Bootstrap dropdown when I click a item of another dropdown.</p>
  
  <p>The idea is to select a city from the first drop down - then the script will auto open the second dropdown with areas (and show only areas corresponding to the chosen city).</p>
  
  <p>Here is my JS: </p>
  
  <pre><code>$('#sidebar_filter_city li').click(function(){   
      $('#sidebar_filter_areas').dropdown('toggle');
  });
  </code></pre>
  
  <p>and this is the HTML:</p>
  
  <pre><code>&lt;div class="dropdown form-control"&gt;
     &lt;div data-toggle="dropdown" id="sidebar_filter_cities" class="sidebar_filter_menu" data-value="jersey-city"&gt;Jersey City&lt;span class="caret caret_sidebar"&gt;&lt;/span&gt;&lt;/div&gt;           
     &lt;input type="hidden" name="advanced_city" value="jersey-city"&gt;
     &lt;ul id="sidebar_filter_city" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_cities"&gt;
        &lt;li role="presentation" data-value=""&gt;All Cities&lt;/li&gt;
        &lt;li role="presentation" data-value="jersey-city"&gt;Jersey City&lt;/li&gt;
        &lt;li role="presentation" data-value="london"&gt;London&lt;/li&gt;
        &lt;li role="presentation" data-value="new-york"&gt;New York&lt;/li&gt;
     &lt;/ul&gt;        
     &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="dropdown form-control"&gt;
      &lt;div data-toggle="dropdown" id="sidebar_filter_areas" class="sidebar_filter_menu"&gt;All Areas&lt;span class="caret caret_sidebar"&gt;&lt;/span&gt; &lt;/div&gt;           
          &lt;input type="hidden" name="advanced_area" value=""&gt;
             &lt;ul id="sidebar_filter_area" class="dropdown-menu filter_menu" role="menu" aria-labelledby="sidebar_filter_areas"&gt;
                 &lt;li role="presentation" data-value=""&gt;All Areas&lt;/li&gt;
                 &lt;li role="presentation" data-value="east-harlem" data-parentcity=""&gt;East Harlem&lt;/li&gt;
                 &lt;li role="presentation" data-value="greenville" data-parentcity=""&gt;Greenville&lt;/li&gt;
                 &lt;li role="presentation" data-value="manhattan" data-parentcity=""&gt;Manhattan&lt;/li&gt;
                 &lt;li role="presentation" data-value="northern-brooklyn" data-parentcity=""&gt;Northern Brooklyn&lt;/li&gt;
  
                    .....
             &lt;/ul&gt;        
          &lt;/div&gt;    
  &lt;/div&gt;
  </code></pre>