Why content of coreui.io navs-tabs is not changed clicking on header? #599

In laravel 8/jquery 3.6 / @coreui/coreui 3.4.0 app I need to add tab on my form - I opened the page https://coreui.io/docs/components/navs-tabs/
and copypasted tab code

            <nav id="editor_tab">
                <div class="nav nav-tabs" id="nav-tab" role="tablist">
                    <button class="nav-link active" id="nav-home-tab" data-coreui-toggle="tab" data-coreui-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
                    <button class="nav-link" id="nav-profile-tab" data-coreui-toggle="tab" data-coreui-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
                    <button class="nav-link" id="nav-contact-tab" data-coreui-toggle="tab" data-coreui-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
                </div>
            </nav>
            <div class="tab-content" id="nav-tabContent">
                <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">Tab 1...</div>
                <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">Tab 2</div>
                <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">Tab 3</div>
            </div>

HTML:

I changed content of tabs like : “Tab 1...” - to see which tab is now opened.
But clicking on header of any tab content is not changed: https://prnt.sc/_70HzmoWLFk6
Looking at methods at page https://coreui.io/docs/components/navs-tabs/#events I see example :

const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
  const tabTrigger = new coreui.Tab(triggerEl)
  triggerEl.addEventListener('click', event => {
    event.preventDefault()
    tabTrigger.show()
  })
})

Code (JavaScript):

I remade my html and javascript code :

                <ul class="nav nav-tabs" id="myTab" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="home-tab" data-coreui-toggle="tab" data-coreui-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-coreui-toggle="tab" data-coreui-target="#tabContentProfile" type="button" role="tab" aria-controls="tabContentProfile" aria-selected="false">Profile</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="messages-tab" data-coreui-toggle="tab" data-coreui-target="#messages" type="button" role="tab" aria-controls="messages" aria-selected="false">Messages</button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="settings-tab" data-coreui-toggle="tab" data-coreui-target="#settings" type="button" role="tab" aria-controls="settings" aria-selected="false">Settings</button>
                    </li>
                </ul>
                <!-- Tab panes -->
                <div class="tab-content mb-lg-4">
                    <div class="tab-pane active" id="home" role="tabpanel" aria-labelledby="home-tab" tabindex="0">Tab 1a</div>
                    <div class="tab-pane" id="tabContentProfile" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">Tab 2b</div>
                    <div class="tab-pane" id="messages" role="tabpanel" aria-labelledby="messages-tab" tabindex="0">Tab 3c</div>
                    <div class="tab-pane" id="settings" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">Tab 4d</div>
                </div>

HTML:

By default 1st tab is opened and I try by clicking on “Profile” tab to open “Tab 2b” content with

id="tabContentProfile" :
    const triggerTabList = document.querySelectorAll('#myTab button')
    console.log('triggerTabList::')
    console.log(triggerTabList)
    triggerTabList.forEach(triggerEl => {
        const tabTrigger = new coreui.Tab(triggerEl)
        triggerEl.addEventListener('click', event => {
            console.log('tabTrigger::')
            console.log(tabTrigger.id)
            console.log(tabTrigger.name)
            console.log("tabTrigger._element::")
            console.log(tabTrigger._element)
            console.log(tabTrigger._element.id)
            console.log(tabTrigger._element.name)
            console.log(tabTrigger)
            event.preventDefault()
            tabTrigger.show()
            if( tabTrigger._element.id === 'profile-tab') {
                var tabContentName = 'tabContentProfile'
                var tabContentElement = document.getElementById(tabContentName)
                console.log('tabContentElement::')
                console.log(tabContentElement)
                tabContentElement.show()  // This like raise error
            }
        })
    })

Code (JavaScript):

But I got error :

Uncaught TypeError: tabContentElement.show is not a function
    at HTMLButtonElement.<anonymous> (admin.js?id=05fd01d501488b137e58:43600:27)

Code (markup):

What I see in browser's console : https://prnt.sc/Xi2c4xguugp6
Tab header is selected, but not content area...
I suppose I need to convert tabContentElement element into coreui class, similar I made with method above :

new coreui.Tab(triggerEl)

Code (JavaScript):

But I did not find any similar method...
Not sure if that is correct way and why nav-tabs does not work by default without any JS code ?
Do I really need JS code in this case?

 

Greetings! As a technology enthusiast and a passionate advocate of leveraging the power of AI and automation, I am thrilled to connect with you. My name is ilya, and I specialize in developing cutting-edge digital solutions that revolutionize businesses and streamline processes. With an unwavering focus on harnessing the potential of artificial intelligence and automation, I strive to create efficient and intelligent systems that drive growth and enhance productivity. Enough about me ...

In order to make the tab functionality work correctly with the CoreUI library in your Laravel 8 application, you can modify your JavaScript code as follows:

document.addEventListener('DOMContentLoaded', function() {
const triggerTabList = document.querySelectorAll('#myTab button');
triggerTabList.forEach(triggerEl => {
const tabTrigger = new coreui.Tab(triggerEl);
triggerEl.addEventListener('click', event => {
event.preventDefault();
tabTrigger.show();
if (triggerEl.id === 'profile-tab') {
const tabContentName = 'tabContentProfile';
const tabContentElement = document.getElementById(tabContentName);
const tabContent = new coreui.Tab(tabContentElement);
tabContent.show();
}
});
});
});

Code (JavaScript):

Explanation:

1. Wrap your code inside the DOMContentLoaded event listener. This ensures that the JavaScript code is executed after the DOM is fully loaded.
2. Create a new instance of coreui.Tab for the tab content element with the ID tabContentProfile.
3. Call the show() method on the tabContent instance to display the corresponding tab content.

Make sure to include this modified JavaScript code in your application and test if the tab functionality works as expected.

Regarding your question about whether you need JavaScript code for tab functionality, the CoreUI library requires JavaScript to enhance and add interactivity to various components, including tabs. Without the JavaScript code, the tabs may not function properly.

Looking forward to connecting with you and being part of your success story.
-Ilya

 

The issue with your CoreUI nav-tabs not working by default and the error you're encountering with the show method lies in the approach you're taking. Here's a breakdown of the problem and the correct way to use CoreUI nav-tabs:

CoreUI Nav-tabs and JavaScript:
CoreUI nav-tabs are designed to work with JavaScript for tab functionality. While the basic HTML structure might render the tabs visually, the tab switching behavior (showing/hiding content) is handled by JavaScript code.

Explanation of the Problem:

1. Missing JavaScript Initialization: The CoreUI documentation you linked provides an example of initializing the tabs using new coreui.Tab(triggerEl). This creates a CoreUI Tab object that manages the tab behavior. You haven't included this initialization step in your code.
2. Incorrect show Method: The show method you're trying to call on tabContentElement doesn't exist because it's a plain HTML element, not a CoreUI Tab object. CoreUI's show method is a part of the Tab object and controls the visibility of the associated tab content.
   

Solution:

1. Include CoreUI JavaScript: Make sure you've included the CoreUI JavaScript file in your project. This file contains the necessary code for CoreUI components, including tabs.
2. Initialize CoreUI Tabs: Use the provided JavaScript code to initialize the tabs. Here's the relevant part from the CoreUI documentation

JavaScript
const triggerTabList = document.querySelectorAll('#myTab button')
triggerTabList.forEach(triggerEl => {
const tabTrigger = new coreui.Tab(triggerEl)
triggerEl.addEventListener('click', event => {
event.preventDefault()
tabTrigger.show()
})
})

This code finds all buttons within the element with id="myTab" (replace with your actual ID) and initializes each one as a CoreUI Tab object. The click event listener on each button calls the show method of the corresponding Tab object, handling the tab switching logic.

While CoreUI nav-tabs require JavaScript for full functionality, some basic visual aspects might work without it. You might see the tab headers rendered, but clicking them won't switch the content. This is because the JavaScript is responsible for the dynamic behavior of showing/hiding content based on user interaction.