CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptabstwitter-bootstrap-3
sasklacz
sasklacz

Reputation: 3628

Clickable tabs and tabbed content in bootstrap dropdown

I'm trying to build a custom bootstrap 'select', that can display tabs instead of simple list. So I've included tabs html in a dropdown, which works perfectly. The problem is - I can't switch tabs or click content in them without closing the whole dropdown. Of course I can add stopPropagation on click which will prevent dropdown from hiding, but then events for tabs and tabbed content are also not propagated. Anyone stumbled upon this and has a clean solution ?

Runnable demo : http://plnkr.co/edit/YebYGXvjufHKwjvTBOl8

Upvotes: 0

Views: 413

Answers (1)

ɐsɹǝʌ ǝɔıʌ
ɐsɹǝʌ ǝɔıʌ

Reputation: 4512

Add this script

<script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click', '.nav', function (e) {
            $(this).hasClass('open') && e.stopPropagation();
        }); 
    });        
</script>

Add open class to your nav

<ul role="tablist" class="nav nav-tabs open">

DEMO

Upvotes: 1

Related Questions