User navigation to another tab and filter by external button
Hi,
I am using metronic18/demo18 and I want to send an user by click on one button which could be visible in first tab in your example (i.e. "SaaS Application") and I want to send him to third tab ("#kt_general_widget_1_3" / "Order Management") and directly to third filter tab ("#kt_table_widget_5_tab_3" / "day"). How I can navigate users by one buttons click like that? I prefer using javascript and/or with jQuery.
Thank you, Richard
Replies (6)
Hi,
You can use the already included Smooth Scroll plugin and scroll the viewport to any element on the page.
Regards.
Hi,
but it seem this does not work if that element is not visible on page (have fade class).
If I use my button as you mentioned like this (this button is visible on homescreen on page load to visitors):
<a href="#kt_table_widget_a_tab_3" class="btn btn-info" data-kt-scroll-toggle >text on button</a>I want by click on that button make visible / move visitors to this tab:
<div class="tab-pane fade" >..</div>But smooth scroll is not working like that. Have you any other idea? (that element have correct id, but i am not able to paste here id of that div.
Richard
Hi,
Thank you for the clarifications.
Let us check this further and we will try to implement it as per your requirements and we will get back to you with a workaround.
Regards.
Hi,
You can use Bootstrap Tab API to display other tabs programmatically by referring to the Bootstrap Tabs Docs.
// On document ready(put this after core js includes in the page footer)
KTUtil.onDOMContentLoaded(function() {
const btnEl = document.getElementById("#my_button")
btnEl.addEventListener("click", function(){
const triggerEl = document.querySelector("#myTab
button[data-bs-target="#profile"]");
bootstrap.Tab.getInstance(triggerEl).show(); // Select tab by name
});
});Regards.
Hi, thank you for navigating where find a solution.
It work, but you example only needs create "new" instance of tab like my example bellow and then it start working. Thank you.
var triggerEl = document.querySelector("#tab_mainmenu a[href="#kt_general_widget_1_2"]");
var tabTrigger = new bootstrap.Tab(triggerEl);
tabTrigger.show();Hi 
,
Oh, that's great that you managed to get it working.
If you need any further help please let us know. All the best with your project!
Regards.
