In Bootstrap 5.3.x as you can see in this tutorial JavaScript behavior in Navs and tabs, want to active “profile” tab when the page has been loaded(as an example) but get this error:
Error line: bootstrap.Tab.getInstance(triggerEl).show()
Error messages: TypeError: Cannot read properties of null (reading 'show')
I used copy/paste codes from the tutorial on my HTML page:
<HTML>
<head>
<meta name="viewport" content="width=device-width">
<link href="bootstrap/css/bootstrap.css" rel="stylesheet" />
<script src="jquery/jquery.js"></script>
<script src="bootstrap/js/bootstrap.js"></script>
</head>
<body>
<div class="row text-center mt-5">
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-
target="#home" type="button" role="tab" aria-controls="home" aria-
selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-
target="#profile" type="button" role="tab" aria-controls="profile" aria-
selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="messages-tab" data-bs-toggle="tab" data-bs-
target="#messages" type="button" role="tab" aria-controls="messages" aria-
selected="false">Messages</button>
</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab"
tabindex="0">...</div>
<div class="tab-pane" id="profile" role="tabpanel" aria-labelledby="profile-tab"
tabindex="0">...</div>
<div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab"
tabindex="0">...</div>
</div>
<script>
const triggerEl = document.querySelector('#myTab button[data-bs-
target="#profile"]')
//error happening in this line
bootstrap.Tab.getInstance(triggerEl).show() // Select tab by name
</script>
</body>
</html>