Tabs Section Not Working

Reply to Tabs Section Not Working on Fri, 09 Jul 2021 06:11:39 GMT

Wassim — Fri, 09 Jul 2021 06:11:39 GMT

@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.

Reply to Tabs Section Not Working on Thu, 08 Jul 2021 23:23:45 GMT

Kirk Brown — Thu, 08 Jul 2021 23:23:45 GMT

@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.

Reply to Tabs Section Not Working on Thu, 08 Jul 2021 22:47:53 GMT

Kirk Brown — Thu, 08 Jul 2021 22:47:53 GMT

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

Reply to Tabs Section Not Working on Thu, 08 Jul 2021 11:19:21 GMT

Wassim — Thu, 08 Jul 2021 11:19:21 GMT

@kirk-brown of course yes

Reply to Tabs Section Not Working on Thu, 08 Jul 2021 10:37:01 GMT

Kirk Brown — Thu, 08 Jul 2021 10:37:01 GMT

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

Reply to Tabs Section Not Working on Thu, 08 Jul 2021 06:15:35 GMT

Wassim — Thu, 08 Jul 2021 06:15:35 GMT

@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