Multiple Tab Elements - Change on click

[vamshiraj]

Hello,
I’m trying to setup a section which shows 2 different Tab Elements based on a click from visitor, each Tab element having possibly more than 5 Tabs. I’ve figured out how to add more than 5 Tabs. Is there an element which can trigger the other tab to show when a visitor clicks on a specific button? I’ve attached the mockup of the design.

[nabeel]

Hi @vamshiraj,

Thank you for reaching out to us. Give both of your tab elements a class first e.g tab-element-one to the first and tab-element-two to the second element. Now if you want the second element to be hidden initially add the following code in the Theme Options > CSS:

.tab-element-two {
    display: none;
}

Now you can give your two buttons different classes so you can show the tabs on their click e.g tab-btn-one to the first and tab-btn-two to the second button. Now you can add the following code in the Theme Options > JS:

jQuery(document).ready(function($){
	$('.tab-btn-one').click(function(){
		$('.tab-element-one').show();
		$('.tab-element-two').hide();
	});
	$('.tab-btn-two').click(function(){
		$('.tab-element-two').show();
		$('.tab-element-onw').hide();
	});
});

This will show / hide the tabs based on the user click.

Or If you’re trying to open a tab on a button click, If you’re using a classic tab element then you can do this with custom scripting. First give your button a class e.g open-tab and then add the following code in the Theme Options > JS:

jQuery( function($) {
	$('.open-tab').on('click', function( e ) {
		e.preventDefault();
		e.stopPropagation();
		var tab_id = 'x-legacy-tab-2';
		$('#' + tab_id).click();
		$('html, body').stop().animate( { scrollTop : $( 'a[data-x-toggleable="' + tab_id + '"]' ).offset().top - 80 } );
	});
});

In classic tab element the first tab will get the ID x-legacy-tab-1, the second one will get x-legacy-tab-2 and so on so in the above code change the tab_id you’re trying to open on a button click.

Please note that the code provided above serves as a guide only and is to help you in getting started so implementing it and maintaining the code will be out of our support scope and for further maintenance for new possible versions of the theme that may cause the customization to break, you will need to hire a developer.

Thank you for your understanding!

[vamshiraj]

Hi @Nabeel,
Thanks for the detailed instructions. I was able to setup the section as desired.
Just one issue- On selection of button, the page scrolls to the top.
How do I resolve this?

[nabeel]

Hi again,

To fix the jump issue, change the button URL from # to javascript:void(0); (see screenshot)

Or you can simply replace the previous code with the following code:

jQuery(document).ready(function($){
	$('.tab-btn-one').click(function(e){
		e.preventDefault();
		e.stopPropagation();
		$('.tab-element-one').show();
		$('.tab-element-two').hide();
	});
	$('.tab-btn-two').click(function(e){
		e.preventDefault();
		e.stopPropagation();
		$('.tab-element-two').show();
		$('.tab-element-onw').hide();
	});
});

Cheers!

[vamshiraj]

That worked well. Thanks!

I’m trying to use radio buttons inline with the text using a raw content element, but the text and radio buttons are always centered and in separate lines each. How do I get them all to display in the same line?

[rad]

Hi Vamshi,

Would you mind providing the exact content you’re adding in the raw element? And please provide the page URL in question

Thanks!

Update: Saw it, please remove the <label> wrapping from those texts. Or add the element within the <label> itself, it’s the appropriate one so when user click the label, it also toggle the option. Example,

<label> <input class="tab-btn-one" type="radio" name="Type"> Seller</label>

Hope this helps.

[vamshiraj]

@Rad

<label> <input class=“tab-btn-one” type=“radio” name=“Type”> Seller</label>

Tried both options and also removed wrapping div tags. One radio button still doesn’t fall inline. Could you please check?

Update:
It shows up fine in cornerstone preview, but on live site its still the same.

[rad]

Hi Vamshi,

It works on my end, it could be just your browser cache.

Please clear your browser cache and test it again.

Thanks!

[vamshiraj]

Thanks for the quick response @Rad.
This is what I’m looking for.

It shows up like this on the editor, but not in any of the browsers I’m testing on.(I’ve cleared caches to make sure)

[rad]

Hi Vamshi,

Ah, all inline and not just label and the option. In that case, you should remove line breaks or <br> as well.

It should be exactly as this

<form class="raw-radio"> I am an Amazon <input class="tab-btn-one" type="radio" name="Type"> Seller <input class="tab-btn-two" type="radio" name="Type" checked=""> Vendor </form>

Thanks!