How to modify showing tabs in Bootstrap 5?-CodePudding

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" >
            <ul  role="tablist" id="mytabs">
                <li ><a href="#panel-rides" id="rides-tab" role="tab" data-toggle="tab" aria-controls="rides-tab" aria-expanded="true"><i ></i><span> Calendar</span></a></li>
                <li><a href="#panel-routes" id="routes-tab" role="tab" data-toggle="tab" aria-controls="routes-tab"><i ></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 ></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 ></i><span> Coffee</span></a></li>
                <li><a href="#panel-account" id="account-tab" role="tab" data-toggle="tab" aria-controls="account-tab"><i ></i><span> Account</span></a></li>
            </ul>
        </div>

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

CodePudding user response：

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" >
    <ul  role="tablist" id="mytabs">
        <li ><a href="#panel-rides" id="rides-tab" role="tab" data-toggle="tab" aria-controls="rides-tab" aria-expanded="true"><i ></i><span> Calendar</span></a></li>
        <li><a href="#panel-routes" id="routes-tab" role="tab" data-toggle="tab" aria-controls="routes-tab"><i ></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 ></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 ></i><span> Coffee</span></a></li>
        <li><a href="#panel-account" id="account-tab" role="tab" data-toggle="tab" aria-controls="account-tab"><i ></i><span> Account</span></a></li>
    </ul>
</div>
<button>Test</button>