SOLVED Tabs Section Not Working

Kirk Brown

Hello. I added an additional tab button to my tab section and now it is not working.
The issue can be found on this page: https://dynamiccelebrationlighting.com/Locations-We-Service

Also, is there a way to make it so no tabs are open on page load? I want only a tab to start showing when clicked.

Thanks!

Wassim

@kirk-brown hi, I think your tabs are wrongly configured. But as you can't have no tabs opened I would recommend you to code your entire system :
1 - create the buttons without the tabs plugin
2 - on each button add a class my-tab-button and a custom attribute data-area="main-line" with the appropriate area inside.
3 - create one row per area and add the class my-tab-content and a custom attribute data-area="main-line" with the appropriate area inside.
4 - on your button go to trigger => javascript code => and add this code

$('.my-tab-button').click(function () {
  $(".my-tab-content").removeClass("opened");
  $(".my-tab-content[data-area='"+$(this).attr("data-area")+"']").addClass("opened");
});

5 - add the following css

body:not(.pagebuilder-edition) .my-tab-content:not(:opened) {
  display:none;
}

Note that the body:not(.pagebuilder-edition) is just to still see your items while you're in the pagebuilder.

Wish you'll do it successfully

Kirk Brown

@wassim
Hello. Thanks for this. I will try this later today. Will this still be responsive and display well on mobile?

Wassim

@kirk-brown of course yes

Kirk Brown

@wassim Where do you add the CSS code? How do you get there?

Kirk Brown

@wassim
I followed your instructions and it seems to not work.
Also, I would like only one tab content area open at a time so if one is alreay open and you click a different button, it will close the first tab content and open a new one. I'm assuming the code above won't achieve this.

Wassim

@kirk-brown it does meet all your requirement.

Add the jQuery code into a jQuery source code and the CSS into a CSS source code.

REMINDER

SOLVED Tabs Section Not Working