Share via

How to hide some tab(s) of Bootstrap tab table?

Question

Thursday, July 25, 2019 3:05 PM

Hi, I am using Bootstrap tab table in my mvc web app as this:

<div id="tabs">
    <ul class="nav nav-tabs">
        <li class="active"><a data-toggle="tab"    href="#tab1">Product</a></li>
        <li><a data-toggle="tab" class="Deptnav_link" data_id="2"  href="#tab2">Product1</a></li>     
            <li><a data-toggle="tab" class="Deptnav_link" data_id="3" href="#tab3">Product1</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="4" href="#tab4">Product2</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="5" href="#tab5">Product3</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="6" href="#tab6">Product4</a></li>
           
    </ul>
</div>

Now, based on certain conditions, I need to hide some tab(s), this is what I tried: in the razor view contains the above tab table, I added the following codes, but this does not work.

$(document).ready(function () {        
        var chkFormationDept = document.getElementById("Product_Type").checked;
        var active_tab_selector = $('.Deptnav_link > li.active > a').attr('href'); // here I need to find the tab id and hide it like below
        if (chkFormationDept == "True") {
            $(target_tab_selector).addClass('hide'); //do the hide here

        }
        
    });

I appreciate any help, thanks a lot,

All replies (5)

Thursday, July 25, 2019 4:41 PM ✅Answered

 $('#tabs li > a[data_id=3]').parent().removeClass('active').addClass('hide');

note: data_id is an invalid attribute name, you should use data-id. also in a razor helper, if you used new {data_id = "3"}, it would render data-id="3"

Friday, July 26, 2019 5:14 AM ✅Answered

Hi Peter,

According to your requirements, you can continue to follow this line of thought, but if you need to control the same tab display or hide back and forth, you need to modify the statement.

I have make an example based on your needs, you can refer to the following code:

@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Index</title>
    <link href="~/Content/bootstrap.min.css" rel="stylesheet" />
    <script src="~/Scripts/jquery-3.3.1.min.js"></script>
    <script type="text/javascript">
        
        $(function () { 
            $("#Product_Type").click(function () {
                var chkFormationDept = document.getElementById("Product_Type").checked;
                if (chkFormationDept) {
                    $('#tabs li > a[data_id=3]').parent().removeClass('active').css('display', 'none');
                } else {
                    $('#tabs li > a[data_id=3]').parent().removeClass('active').css("display", "block");
                }

            })
        })
    </script>
</head>
<body>
    <input id="Product_Type" type="checkbox" />
    <div id="tabs">
        <ul class="nav nav-tabs">
            <li class="active"><a data-toggle="tab" href="#tab1">Product</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="2" href="#tab2">Product1</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="3" href="#tab3">Product1</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="4" href="#tab4">Product2</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="5" href="#tab5">Product3</a></li>
            <li><a data-toggle="tab" class="Deptnav_link" data_id="6" href="#tab6">Product4</a></li>

        </ul>
    </div>
  </body>
</html>

The result of this work demo:

Best Regards,

YongQing.

Thursday, July 25, 2019 3:24 PM

to hide the active menu, you need to hide the <li> 

     $('#tabs li.active').removeClass('active').addClass('hide');

you should probably pick a new tab to display. 

 

Thursday, July 25, 2019 3:42 PM

bruce (sqlwork.com)

to hide the active menu, you need to hide the <li> 

     $('#tabs li.active').removeClass('active').addClass('hide');

you should probably pick a new tab to display. 

Hi bruce, thank you for your quick response,

Actually, not only for active tab, I also need to hide inactive tab(s), can we?

can we identify the tab(s) by the "data_id" ? for example if I want to hide "data_id"="3"

Thursday, July 25, 2019 6:04 PM

 $('#tabs li > a[data_id=3]').parent().removeClass('active').addClass('hide');

note: data_id is an invalid attribute name, you should use data-id. also in a razor helper, if you used new {data_id = "3"}, it would render data-id="3"

This seems working, so we have the "hide", I also need to show some tab(s),

can I use this code to show the tab based on certain condition?

$('#tabs li > a[data_id=3]').parent().removeClass('active').addClass('show');

  • Last updated on