CODEWITHSUNDEEP
twitter-bootstraptabs
user2487147
user2487147

Reputation: 21

Bootstrap Tab close active on click

I've got following code:

<div id="action_wrap">
    <div id="action_nav">
        <div class="action" data-target="#content1" data-toggle="tab">First Block</div>
        <div class="action" data-target="#content2" data-toggle="tab">Second Block</div>
        <div class="action" data-target="#content3" data-toggle="tab">Third Block</div>
    </div>
    <div id="action_items">
        <div class="action_text collapse" id="content1">
            <p>Content 1</p>
            <span class="close">Close</span>
            <div class="clearfix"></div>
        </div>
        <div class="action_text collapse" id="content2">
            <p>Content 2</p>
            <span class="close">Close</span>
            <div class="clearfix"></div>
        </div>
        <div class="action_text collapse" id="content3">
            <p>Content 3</p>
            <span class="close">Close</span>
            <div class="clearfix"></div>
        </div>
    </div>
</div>

and using Twitter Boostrap's "Tab" script, it works fine. I've added some really nasty looking script for close button and for nav button to get active class like so:

$(".action").click(function () {
    $(this).parent().children().removeClass("active");
    $(this).addClass("active");
    $(this).parent().addClass("active");
});

$(".close").click(function () {
    $(this).parent().parent().parent().children().removeClass("active");
    $(this).parent().parent().parent().children().children().removeClass("active");
});

it's not much but meh, it's working.

What i cannot do tho is make Bootstrap's Tab's closable by clicking active nav div. Meaning if i click first .action div with data-target on #content1, .action_text#content1 will get .active class and so will the .action div i clicked on. And what i want is for .action.active data-target="#content1" on click removing .tab()'s class "active" and same for itself.

I found in another thread that changing the code from Bootstrap's Tab script

$(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
    e.preventDefault()
    $(this).tab('show')
})

but it seems everytime i edit it, it just breaks whole thing. I tried adding if statement like so

  $(document).on('click.tab.data-api', '[data-toggle="tab"], [data-toggle="pill"]', function (e) {
      if ($(this).hasClass('active')) {
        $(this).tab().removeClass('active');
        $(this).removeClass('active');
      } else {
        e.preventDefault()
        $(this).tab('show')
      }
  })

But whole thing stopped working.

Upvotes: 2

Views: 14375

Answers (3)

Jiminy Cricket
Jiminy Cricket

Reputation: 916

A method for closing an open active tab for Bootstrap 5 using jQuery:

jQuery(document).ready(function(){
  var activeTabId = false;
  jQuery(".nav-link[data-bs-toggle='tab']").click(function(){
    var clickedTab = jQuery(this);
    var clickedTabId = clickedTab.attr("id");
    if(activeTabId != clickedTabId){
        //On new tab click
        activeTabId = clickedTabId;
    }else{
        //On clicking of open tab -> Close tab
        clickedTab.removeClass("active").attr("aria-selected", false).attr("tabindex", ""); 
        jQuery(clickedTab.attr("data-bs-target")).removeClass("active show");
        activeTabId = false;
    }
  });
});

Upvotes: 0

Artistan
Artistan

Reputation: 2037

this will actually close tabs even with fully qualified urls.

$('[data-toggle=tab]').click(function(){
  if ($(this).parent().hasClass('active')){
    var url = $(this).attr('href');
    var tid = url.split('#')[1];
    console.log(tid);
    $('#'+tid).toggleClass('active');
    document.location.hash = '';
  }
});
 ///  also can work with pills by switching to $('[data-toggle=pill]')

Upvotes: 1

almeidap
almeidap

Reputation: 256

First of all, you should try to avoid changing Bootstrap native code otherwise you may lose the ability to upgrade to future versions.

Regarding your problem, you probably run into some event concurrency issues as did I...

If you want to close active tab when clicking on tab toggle, have a look here: http://bootply.com/61835 (credits to katie, I am not the owner of this script)

But if you want to be able to close active tab (toggle and pane) when:

  • Clicking on active tab toggle
  • Clicking anywhere else outside tab toggle or pane
  • Pressing the ESC key

...then this script may help you:

$(function() {

    var active = $('a[data-toggle="tab"]').parents('.active').length;
    var tabClicked = false;

    // Closes current active tab (toggle and pane):
    var close = function() {
        $('a[data-toggle="tab"]').parent().removeClass('active');
        $('.tab-pane.active').removeClass('active');
        active = null;
    }

    // Closing active tab when clicking on toggle:
    $('[data-toggle=tab]').click(function(){
        if ($(this).parent().hasClass('active')){
            $($(this).attr("href")).toggleClass('active');
            active = null;
        } else {
            tabClicked = true;
            active = this;
        }
    });

    // Closing active tab when clicking outside tab context (toggle and pane):
    $(document).on('click.bs.tab.data-api', function(event) {
        if(active && !tabClicked && !$(event.target).closest('.tab-pane.active').length) {
            close();
        }

        tabClicked = false;
    });

    // Closing active tab on ESC key release:
    $(document).keyup(function(e){
        if(active && e.keyCode === 27) { // ESC
            close();
        }
    });
});

You can try it with this JSFiddle: http://jsfiddle.net/almeidap/EAuUY/ (uses Bootstrap 3)

Upvotes: 2

Related Questions