-
Posts
-
Greetings everyone…
Just a quick contribution. I needed to programatically switch tabs without forcing the user to scroll back to the top of the page where the tabs are located. I found a couple of similar questions elsewhere in the forum and the answers were a bit, well, overkill. Here’s the easy way:
First, create your link to the desired tab. In this case, we’re referring to the second tab.
Note: X Theme refers to tabs in the order in which they appear, i.e., 1 thru 5 (or greater).
Then, add the following jQuery at the end of the page:
<pre style=”display: none”>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a.switch-tab').on('click', function(event) {
event.preventDefault();
var id = $(this).attr('href'); // id="#tab-x"
var tabnav = id[id.length -1]; // tabnav="x" (x = 1...6)
$('.x-nav-tabs .x-nav-tabs-item [data-cs-tab-toggle="' + tabnav + '"]').trigger('click');
$('html, body').animate({scrollTop: 0}, duration);
});
});
</script>
Lots going on here! First, there’s my favorite trick of including jQuery directly in a post or page by wrapping the script in
and
tags. As for the code itself: it hooks the click event on the "switch-tab" class, extracts the link "address" (in this case, "#tab-2"), then obtains the tab number (in the "tabnav" variable) by extracting the last character in the string. It then triggers a click event on the target tab, followed by an animated scroll to the top of the page. Voila! Best regards, ChrisAh, the best laid plans of mice and men…
The editor seems to have removed most of my explanation, so here goes again:
The link to the tab should read: a href=”#tab-2″ class=”switch-tab”
Lots going on here! First, there’s my favorite trick of including jQuery directly in a post or page by wrapping the script “pre” and “code” tags (where pre is styled as display: none). As for the code itself: it hooks the click event on the “switch-tab” class, extracts the link “address” (in this case, “#tab-2”), then obtains the tab number (in the “tabnav” variable) by extracting the last character in the string. It then triggers a click event on the target tab, followed by an animated scroll to the top of the page. Voila!
Hopefully that clears things up.
Hello There,
We are just glad that you have figured it out a way to correct the said issue. Thanks for letting us know and for sharing this very helpful information!
Best Regards.
