Twitter Bootstrap Dropdown with Tabs inside

Question

I'm trying to make a dropdown menu with tabs inside of it. The problem is the dropdown closes when I click a tab. See this demo: http://jsfiddle.net/timrpeterson/pv2Lc/2/. (code reproduced below). The cited suggestion to `stopPropagation()` on the tabs anchors doesn't seem to help. Is there a better way? ```

Accepted Answer

Use the specific bootstrap events : the `hide.bs.dropdown` (triggered when the dropdown is about to close) allows you to cancel the "hide" action by calling `e.preventDefault()`. (doc here, list of specific bootstrap events for `scrolldown` components)

You can activate a special flag when the user clicks on a tab, and check that flag in the `hide.bs.dropdown` event on the dropdown :

```
$('#myTabs').on('click', '.nav-tabs a', function(){
    // set a special class on the '.dropdown' element
    $(this).closest('.dropdown').addClass('dontClose');
})

$('#myDropDown').on('hide.bs.dropdown', function(e) {
    if ( $(this).hasClass('dontClose') ){
        e.preventDefault();
    }
    $(this).removeClass('dontClose');
});
```

fiddle (I added html ids to your example, change the selectors according to your needs)

Twitter Bootstrap Dropdown with Tabs inside

Solution

Problem