How to add a new tab

Wappler General How To
#1

Hi, I have added a tab content element to my page and in its default configuration of 3 tabs, it works well.

image

If I try to add a 4th tab, by duplicating a ‘nav list item’ and a ‘tab pane’, setting their ID’s to be the same, as was mentioned in another forum entry, also making sure that only one tab is active, the behavior is still a bit chaotic.

image
image334×578 16.2 KB

In the browser (and also preview mode), as I swap between the tabs, the content is not refreshed properly.

image

I also note that there is a ‘Controlled By’ in the nav pane properties, I tried setting this to the nav item id as well, but did not work.

The page this time is marama-cloud.com/home_test2.php

#2

IDs are unique no two elements should have the same rename them to be different then click each nav link and choose the the tab you want it will show the tabs Id

#3

Hi Sorry, as usual you give me just enough to figure it out. Prior advice to posts in this forum had both the nav link and the nav pane being named the same, but it turns out this is incorrect. In the nav link there is a new property called tab, and in that I entered the nav pane id. It now works really well, thank you.

image
image350×586 16.1 KB

1 Like
#4

For the new tab, the code should look like

<li class="nav-item">
    <a class="nav-link" id="navTabs1_headliners_tab" data-toggle="tab" href="#" data-target="#navTabs1_headliners" role="tab" aria-controls="navTabs1_headliners" aria-selected="true">Headliners</a>
</li>

and the content

<div class="tab-pane fade" id="navTabs1_headliners" role="tabpanel">
    <p>Headliners</p>
</div>

Never mind, I see that you have fixed it.

1 Like