Databases
StackOverflow2013
Postsdbo
POTabbed content with drop down menu
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POTabbed content with drop down menu
    text
    copied!<p>Would it be possible to add extra jQuery to give these tabs an added drop-down menu? </p> <p>Here's the HTML with added drop-down menu items:</p> <pre><code> &lt;div class="tabs"&gt; &lt;ul class="tabs-nav"&gt; &lt;li&gt;&lt;a href="#tab1"&gt;Tab 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab2" &gt;Tab 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#tab3" &gt;Tab 3&lt;/a&gt; &lt;ul&gt;&lt;!-- added drop-down items --&gt; &lt;li&gt;&lt;a href="#son-of-tab3" &gt;drop-down 1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#son-of-tab3" &gt;drop-down 2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="#son-of-tab3" &gt;drop-down 3&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt;&lt;!-- end tab 3--&gt; &lt;/ul&gt; &lt;div class="tabs-content"&gt; &lt;div id="tab1" class="content"&gt; &lt;!-- tab1 content --&gt; &lt;/div&gt; &lt;div id="tab2" class="content"&gt; &lt;!-- tab2 content --&gt; &lt;/div&gt; &lt;div id="tab3" class="content"&gt; &lt;!-- tab3 content --&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- /tabs-content --&gt; &lt;/div&gt; &lt;!-- /tabs --&gt; </code></pre> <p>The jQuery that makes the tabs work but needs something extra to make the dropdown work?</p> <pre><code> &lt;script&gt; $(document).ready(function() { //add active class to the first li $('.tabs-nav li:first').addClass('active'); //hide all content classes. $('.content').hide(); //show only first div content $('.content:first').show(); //add the click function $('.tabs-nav li').click(function(){ //remove active class from previous li $('.tabs-nav li').removeClass('active'); //add active class to the active li. $(this).addClass('active'); //hide all content classes $(".content").hide(); //find the href attribute of the active tab var activeTab = $(this).find("a").attr("href"); //fade in the content of active tab $(activeTab).fadeIn(1000); return false; }); }); &lt;/script&gt; </code></pre> <p>I can post css if needed</p> <p>Many Thanks,</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload