dropdown tab with split button dropdowns behavior

Question

I would like to use a dropdown tab, but a little bit tweaked: I would like to show a dropdown menu (without selecting the tab) when I press the caret, whereas if I press the tab voice or one of the drop menu items, the tab will be selected.

Consider this:

if I press the down caret of "Dropdown", I would like to show the dropdown menu like this:

and in case I select @fat or @mdo, the tab will be selected, otherwise it should be set back to its pristine version above. This is the actual behavior of a normal dropdown item in a tab, but the title opens the dropdown menu instead of opening a tab, and that's what I don't want. In other words, the tabs I could open would be three instead of two. So: how to differentiate the two components?

Answer 1

I did it. The tweak is actually quite simple.

This is the code it's needed for a dropdown tab. Notice it's slightly different from a normal bootstrap dropdown tab:

<ul class="nav nav-tabs myTabDrop">
  <li id="tabOccrs" class="dropdown">
    <a href="#" class="contentTab dropdown-toggle">Tab (<span class="tabsel">option1</span>) <span class="crtOpenDrop">▾</span></a>
    <ul class="dropdown-menu">
      <li><a href="#dropdown1" data-toggle="tab" class="subtab">Option1</a></li>
      <li><a href="#dropdown2" data-toggle="tab" class="subtab">Option2</a></li>
    </ul>
  </li> 
</ul>   

The jquery script we need is the following:

$('.myTabDrop span.crtOpenDrop').click(function (e) {
    e.preventDefault();

    $(this).closest("a")
        .addClass("dropdown-toggle")
        .attr("data-toggle", "dropdown");
});


$('.myTabDrop a.contentTab').click(function (e) {
    e.preventDefault();

    if(! $(e.target).is("span")) {
        $(this).removeClass("dropdown-toggle")
            .attr("data-toggle", "")
            .tab("show");
    }
});

of course further little tweaks are needed, but this is a semi-complete solution (and graphically complete)

UPDATE

I created a jquery plugin for this need. Enjoy using it