Super Sale
Limited Time 50% OFF for All-Access Plans
Save 50% Now
Issue KTTabs
Issue with KTTabs component
The KTTabs component seems to have some issues. I followed the documentation provided here: https://ktui.io/docs/tabs#examples
When I try to dynamically set the active tab via JavaScript, it always throws an error at line 104:
this._currentContentElement is null
Replies (6)
Hi
Can you please try this?
Add IDs to the container and content divs:
<div class="space-y-3">
<div class="kt-tabs kt-tabs-line" data-kt-tabs="true" >
<button class="kt-tab-toggle active" data-kt-tab-toggle="#tab_1_1">Tab 1</button>
<button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_2">Tab 2</button>
<button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_3">Tab 3</button>
</div>
<div class="text-sm">
<div >Tab 1 content.</div>
<div class="hidden" >Tab 2 content.</div>
<div class="hidden" >Tab 3 content.</div>
</div>
</div>Select the button element, not the content div:
const tabsEl = document.querySelector("#my_tabs");
// Select the BUTTON element using attribute selector
const tabButton = tabsEl.querySelector("button[data-kt-tab-toggle="#tab_1_2"]");
const tabs = KTTabs.getInstance(tabsEl);
tabs.show(tabButton); // Pass the button element, not the content divThe show() method expects a button element. It reads the button's data-kt-tab-toggle attribute (e.g., #tab_1_2) to find the corresponding content div. If you pass a content div, there's no data-kt-tab-toggle attribute, so _currentContentElement becomes null and throws an error
if you don't want to add container ID:
// Select container by data attribute
const tabsEl = document.querySelector("[data-kt-tabs="true"]");
const tabButton = tabsEl.querySelector("button[data-kt-tab-toggle="#tab_1_2"]");
const tabs = KTTabs.getInstance(tabsEl);
tabs.show(tabButton);Hi,
okay, you have to use the button.
The documentation needs to be updated, even in the method it expects tabElement.
Hi
Check your HTML structure:
Tab buttons need data-kt-tab-toggle with a valid selector (e.g., #tab-content-1)
Or an href pointing to the content element
The target content element must exist in the DOM
Verify the tab element reference:
// Make sure you"re passing the actual tab button element, not the content element
const tabsContainer = document.querySelector("#my_tabs");
const tabs = KTTabs.getInstance(tabsContainer);
const tabButton = document.querySelector("#my_tab_button"); // The button with data-kt-tab-toggle
// Verify the content element exists before showing
const contentSelector = tabButton.getAttribute("data-kt-tab-toggle");
const contentElement = document.querySelector(contentSelector);
if (contentElement) {
tabs.show(tabButton);
} else {
console.error("Content element not found:", contentSelector);
}Example HTML structure:
<div data-kt-tabs="true">
<!-- Tab buttons -->
<button data-kt-tab-toggle="#tab-content-1">Tab 1</button>
<button data-kt-tab-toggle="#tab-content-2">Tab 2</button>
<!-- Tab content -->
<div >Content 1</div>
<div >Content 2</div>
</div>Your example does not work and immediately throws an error.
This example is copied directly from the official documentation.
HTML
<div class="space-y-3"> <div class="kt-tabs kt-tabs-line" data-kt-tabs="true" > <button class="kt-tab-toggle active" data-kt-tab-toggle="#tab_1_1">Tab 1</button> <button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_2">Tab 2</button> <button class="kt-tab-toggle" data-kt-tab-toggle="#tab_1_3">Tab 3</button> </div> <div class="text-sm"> <div > Tab 1 content. </div> <div class="hidden" > Tab 2 content. </div> <div class="hidden" > Tab 3 content. </div> </div> </div>JavaScript
const tabsEl = document.querySelector("#my_tabs"); const tabEl = document.querySelector("#tab_1_2"); const tabs = KTTabs.getInstance(tabsEl);
tabs.show(tabEl);
