Bootstrap responsive tab to dropdown, what is missing from my code?
<p>I am trying to convert bootstrap tabs to a dropdown menu for smaller screens. Two things I want for my dropdown are:</p>

<ul>
<li>The button will first say 'please select' and once a list item is selected, it will be what is showing on the button</li>
<li>The dropdown still functions like a tab, the tab content will be under the dropdown menu and will change according to what is selected</li>
</ul>

<p>I've gotten the first point to work by using this in my js file:</p>

<pre><code>$('#product-list .dropdown-menu a').click(function() {
   $('#selected').text($(this).text());
});
</code></pre>

<p>What I noticed with this though is that when I've clicked on multiple items on the list, they are all highlighted as though all active.</p>

<p>With the second point, what I've used enables me to select each item on the list once, but if I go back and try to choose something I've already selected before, it won't change (maybe this has to do with them all being highlighted). The below code is what I've used:</p>

<pre><code>&lt;div class="dropdown col-sm-12"&gt;
    &lt;button id="dLabel" role="button" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true" aria-expanded="false" href="#"&gt;
    &lt;span id="selected"&gt;Please select a product &lt;span class="caret"&gt;&lt;/span&gt;&lt;/span&gt;
    &lt;/button&gt;
    &lt;ul class="dropdown-menu" id="myTabs" aria-labelledby="dLabel"&gt;
        &lt;li role="presentation" class="active"&gt;&lt;a href="#aframe" role="tab" data-toggle="tab"&gt;A-frames&lt;/a&gt;&lt;/li&gt;
        &lt;li role="presentation"&gt;&lt;a href="#alum" role="tab" data-toggle="tab"&gt;Alum panel signs&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
&lt;/div&gt;

&lt;div class="tab-content col-sm-12"&gt;
    &lt;div role="tabpanel" class="tab-pane active" id="aframe"&gt;
        &lt;p&gt;Contents of tab panel in here&lt;/p&gt;
    &lt;/div&gt;
    &lt;div role="tabpanel" class="tab-pane active" id="alum"&gt;
        &lt;p&gt;Contents of tab panel in here&lt;/p&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>Usually with tabs all I need is to link the tab-content to the nav-tab but I'm obviously missing a few things here. Could someone help me?
Much appreciated!</p>