Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

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

Unanswered
sergeynilov asked this question in Q&A
Why content of coreui.io navs-tabs is not changed clicking on header? #599
@sergeynilov sergeynilov
Jun 13, 2023 · 0 comments
Return to top
Discussion options

sergeynilov
Jun 13, 2023

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>

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()
  })
})

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>

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
            }
        })
    })

But I got error :

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

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)

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?
You must be logged in to vote

Replies: 0 comments

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Category
🙏
Q&A
Labels
None yet
1 participant
@sergeynilov
Morty Proxy This is a proxified and sanitized view of the page, visit original site.