Trying to change order of three tabs. Works on staging but not on my live site?
I'm looking to swap the order of three tabs that sit on my homepage.
I've use the insert html option to put the new code in place. It seems to work fine on my staging environment, but on my live test the tabs don't change when I click on them.
The tab code uses the insertion of an "Active" Class for the tab to show it's content.
So my exepriment code cut the html our, re-ordered the tabs and set the tab that was originally third in the order to Active so that it's content showed first.
Optimizely support said it's do to there being dynamic content in this block of code and that using the Insert HTML is no a good idea.
They advised me to try 'Rearrange' option in the visual editor but doesn't work either.
Any help on this would be great.
Solved! Go to Solution.
Can you post a link to the live page and a description of which item you want moved?
Sure you can view the test here:
On the homepage scroll down to the three tabs that read:
Gift Ideas | Multi-buy 2 for 1 |Special Offers
You will see the tabs are not clickable.
When clicking on the tabs, there is an error in the console
TypeError: settings is undefined
Which happens while processing this command:
This error does not happen in the control experiment.
Basically, this means that the way you are manipulating the tabs breaks the click events.
Though I am slightly stumped at how your code is working at all (in my console I need to use jQuery(...) rather than $(...) )... I believe I have an approach that may work (that is to say, the following code works in my console whereas your current code does not). the key difference is rather than replacing the HTML that is the tabs, I simply detach tab #2 and insert it before tab #0.
jQuery('#tab0').removeClass('active'); jQuery('#panel0').removeClass('active'); jQuery('#tab2').detach().insertBefore(jQuery('#tab0')).addClass('active'); jQuery('#panel2').addClass('active'); jQuery(".collection-prev").addClass("yellow"); jQuery(".collection-next").addClass("yellow");
Thanks for your help with that, I've updated my code and it seems to be working fine now.