CODEWITHSUNDEEP
jquerybootstrap-5
quilkin
quilkin

Reputation: 1427

How to modify showing tabs in Bootstrap 5?

I have some code which was working fine in Bootstrap 3.3:

$('#rides-tab').tab('show');

but I get an error ('tab' is not a function) in Bootstrap5. I have tried

bootstrap.Tab.getInstance('#rides-tab').show();

but get an error "Cannot read properties of null (reading 'show')"

This is the html for the tab:

<div id="navbar" class="navbar-collapse collapse">
            <ul class="nav navbar-nav navbar-right" role="tablist" id="mytabs">
                <li class="active"><a href="#panel-rides" id="rides-tab" role="tab" data-toggle="tab" aria-controls="rides-tab" aria-expanded="true"><i class="fa fa-calendar"></i><span> Calendar</span></a></li>
                <li><a href="#panel-routes" id="routes-tab" role="tab" data-toggle="tab" aria-controls="routes-tab"><i class="fa fa-map-signs"></i><span> All routes</span></a></li>
                <li><a href="#panel-setup" id="setup-tab" role="tab" data-toggle="tab" aria-controls="setup-tab"><i class="fa fa-wrench"></i><span> Lead a ride</span></a></li>
                <li><a href="#panel-cafes" id="cafes-tab" role="tab" data-toggle="tab" aria-controls="cafe-tab"><i class="fa fa-coffee"></i><span> Coffee</span></a></li>
                <li><a href="#panel-account" id="account-tab" role="tab" data-toggle="tab" aria-controls="account-tab"><i class="fa fa-user"></i><span> Account</span></a></li>
            </ul>
        </div>

How do I modify the code to make it work with Bootstrap 5?

Upvotes: 0

Views: 365

Answers (1)

SKJ
SKJ

Reputation: 2326

You are using the wrong selector, you need #navbar

$('button').click(function() {
  $('#navbar').show();
});
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="navbar" class="navbar-collapse collapse">
    <ul class="nav navbar-nav navbar-right" role="tablist" id="mytabs">
        <li class="active"><a href="#panel-rides" id="rides-tab" role="tab" data-toggle="tab" aria-controls="rides-tab" aria-expanded="true"><i class="fa fa-calendar"></i><span> Calendar</span></a></li>
        <li><a href="#panel-routes" id="routes-tab" role="tab" data-toggle="tab" aria-controls="routes-tab"><i class="fa fa-map-signs"></i><span> All routes</span></a></li>
        <li><a href="#panel-setup" id="setup-tab" role="tab" data-toggle="tab" aria-controls="setup-tab"><i class="fa fa-wrench"></i><span> Lead a ride</span></a></li>
        <li><a href="#panel-cafes" id="cafes-tab" role="tab" data-toggle="tab" aria-controls="cafe-tab"><i class="fa fa-coffee"></i><span> Coffee</span></a></li>
        <li><a href="#panel-account" id="account-tab" role="tab" data-toggle="tab" aria-controls="account-tab"><i class="fa fa-user"></i><span> Account</span></a></li>
    </ul>
</div>
<button>Test</button>

Upvotes: 1

Related Questions