How to add a dropdown menu to a tab menu

Question

I have a page that uses a tab system to organise the content. To do this I've used the 'Tabify' jQuery plugin (code below).

What I now need to do is to add a dropdown menu to one of the tabs so I can have sub-sections of this tab.

The trouble is that the tab script appears to only work on direct children of the UL element, meaning that my extra UL and LI elements for my dropdown behave very strangely.

See this example (code below)

I can manage a little jQuery but editing the script code to work is sadly beyond me.

Anyone know how I might get this to work?

Thanks in advance,

Tom

HTML:

<!-- TABS -->
<div class="container">
    <ul id="tab-menu">
        <li class="active"><a href="#tab1">Tab 1</a></li>{/if}
        <li>
            <a href="#tab2">Tab 2</a>
            <ul class="sub_sub_menu">
                <li><a href="#dropdown1">Overview</a></li>
                <li><a href="#dropdown2">Floorplans</a></li>
                <li><a href="#dropdown3">Specifications</a></li>
            </ul>
        </li>
        <li><a href="#tab3">Tab 3</a></li>
        <li><a href="#tab4">Tab 4</a></li>
    </ul>
</div>

<!-- CONTENT -->
<div class="container">
    <div id="tab1">
        <p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
    <div id="tab2">
        <div id="dropdown1">
            <p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
        </div>
        <div id="dropdown2">
            <p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
        </div>
        <div id="dropdown3">
            <p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
        </div>
    </div>
    <div id="tab3">
        <p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
    <div id="tab4">
        <p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p>
    </div>
</div>

JS:

(function(a) {
    a.fn.extend({
        tabify: function(e) {
            function c(b) {
                hash = a(b).find("a").attr("href");
                return hash = hash.substring(0, hash.length - 4)
            }

            function f(b) {
                a(b).addClass("active");
                a(c(b)).show();
                a(b).siblings("li").each(function() {
                    a(this).removeClass("active");
                    a(c(this)).hide()
                })
            }
            return this.each(function() {
                function b() {
                    location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent())
                }
                var d = this,
                    g = {
                        ul: a(d)
                    };
                a(this).find("li a").each(function() {
                    a(this).attr("href", a(this).attr("href") + "-tab")
                });
                location.hash && b();
                setInterval(b, 100);
                a(this).find("li").each(function() {
                    a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide()
                });
                e && e(g)
            })
        }
    })
})(jQuery);

$(document).ready(function($){
  $("#tab-menu").tabify();
});

Answer 1

Hre is a demo for the one i am talking about, you dont need to make any javascript calls for this, all you need to do is to play around with your html and css

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <h3>Tabs With Dropdown Menu</h3> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li class="dropdown"> <a class="dropdown-toggle" data-toggle="dropdown" href="#">Menu 1 <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">Submenu 1-1</a></li> <li><a href="#">Submenu 1-2</a></li> <li><a href="#">Submenu 1-3</a></li> </ul> </li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </div> 

Answer 2

See here i used bootstrap along with the tabify to open a dropdown with in a tab, see if that helps , i am in office currently so could not do more, hope you can use it and do some effort to make it work as you want it

 (function(a) { a.fn.extend({ tabify: function(e) { function c(b) { hash = a(b).find("a").attr("href"); return hash = hash.substring(0, hash.length - 4) } function f(b) { a(b).addClass("active"); a(c(b)).show(); a(b).siblings("li").each(function() { a(this).removeClass("active"); a(c(this)).hide() }) } return this.each(function() { function b() { location.hash && a(d).find("a[href=" + location.hash + "]").length > 0 && f(a(d).find("a[href=" + location.hash + "]").parent()) } var d = this, g = { ul: a(d) }; a(this).find("li a").each(function() { a(this).attr("href", a(this).attr("href") + "-tab") }); location.hash && b(); setInterval(b, 100); a(this).find("li").each(function() { a(this).hasClass("active") ? a(c(this)).show() : a(c(this)).hide() }); e && e(g) }) } }) })(jQuery); $(document).ready(function($) { $("#tab-menu").tabify(); }); 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <link href="http://takazudo.github.io/jQuery.tabify/demos/1/styles.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <script src="http://takazudo.github.io/jQuery.tabify/jquery.tabify.js"></script> <!-- TABS --> <div class="container"> <ul id="tab-menu"> <li class="active"><a href="#tab1">Tab 1</a></li> <li> <div class="dropdown"> <a class="dropdown-toggle" type="button" data-toggle="dropdown">Tab 2</button> <ul class="dropdown-menu"> <li><a href="#tab2">Overview</a></li> <li><a href="#tab2">Floorplans</a></li> <li><a href="#tab2">Specifications</a></li> </ul> </div> </li> <li><a href="#tab3">Tab 3</a></li> <li><a href="#tab4">Tab 4</a></li> </ul> </div> <!-- CONTENT --> <div class="container"> <div id="tab1"> <p>Tab 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> </div> <div id="tab2"> <div id="dropdown1"> <p>Dropdown 1 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> </div> <div id="dropdown2"> <p>Dropdown 2 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> </div> <div id="dropdown3"> <p>Dropdown 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> </div> </div> <div id="tab3"> <p>Tab 3 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> </div> <div id="tab4"> <p>Tab 4 content to go here... Lorem ipsum dolor sit met, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna a liqua. Ut enim ad minim venom, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea comido consequat. Luis aute irure dolor in reprehenderit in voluptate velit esse cillim dolore eu fuggita nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit animé id est labour.</p> </div> </div>