Switching tabs only work once

Wappler General Need Help
1

Hello,
I’m doing a little bit of McGyvering and switching tabs from a dropdown. It works well, but only once (ie if I want to return to a tab that was previously active, nothing happens) - very similar to what is described here: https://github.com/twbs/bootstrap/issues/17371 .

This is my code for the dropdown menu and items:

<div class="dropdown ">
							<button id="dropdown_profile" class="btn btn-secondary dropdown-toggle btn-sm" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fa fa-user tx-center wd-16 mg-r-5"></i> MY PROFILE
								OPTIONS</button>
							<div class="dropdown-menu" aria-labelledby="dropdown1">
								<a class="dropdown-item" href="javascript:void(0);" class="nav-link-sec active" data-toggle="tab" data-target="#tabContent_profile_1">My details</a>
								<a class="dropdown-item" href="javascript:void(0);" class="nav-link-sec" data-toggle="tab" data-target="#tabContent_profile_2" ><i class="fa fa-circle tx-center wd-16 mg-r-5"></i>My RSA keys</a>
								
							</div>
						</div>

And this is an example of the tabs I’m trying to switch back and forth:

<div class="tab-content" id="tabContent_profile">
	<div class="tab-pane fade show active" id="tabContent_profile_1" role="tabpanel">
            <p>Data here</p>
         </div>
<div class="tab-pane fade" id="tabContent_profile_2" role="tabpanel">
 <p>More data here</p>
         </div>

I am not skilled enough to adapt the code from the workaround suggested in the page above to this use case, if it even applies. Has anybody ever met a similar situation and would anyone have a suggestion to remove the active class if this is the issue?
The app is using Bootstrap 4.

Thanks!

2

Hi.
The workaround in the given link is quite simple. Although, that bug is about drop down being one of the tab’s headers itself. That is a weird design to be honest.

In your case, you just want the tab to switch when you select an item in dropdown which is outside the tab element, if I understand correctly.

But, interestingly the inherent issue looks like the same - the active state is not removed.
Maybe try this JS static event on the dropdown a.

<a onclick="$(this).removeClass('active');">

I haven’t actually tested this code. Hope it works.

1 Like
3

Thanks @sid - eventually I switched to a set of tabs inside another set of tabs. If the end users request the dropdown, I’ll use your code, it sounds like it fits the use case.

1 Like