Rachel W

Thanks @Ingolme! I fixed all the errors and finally get a "Document checking completed. No errors or warnings to show."

Besides I set up the column content layout to BLOCK in wordpress, so finally the pricing table can be displayed properly.

Cheers!👍

Feeling like I am almost there, but when placing the code on my wordpress site the layout breaks again...

The code itself already functions as how I want it to be: 3 columns of tab groups, clickable and fully responsive
https://codestudy.w3spaces.com/mcafeev2-2021-10-29.html

When placing it on my website, the tab still functions but the 3 column layout breaks. It just insists to display in two lines...
https://dez.com.tw/mcafee/

The code is inserted in an one column wordpress container, and the content width is set to "fit to site width"
I've tried to change various wordpress container setting, alignment and padding but doesn't seem to make the 3 tab groups fit in one line. When changing the browser width the tab groups can act responsive though!

Looking for your advice!

Wow! Thank you! Now it functions as it should!And extra thanks to mention the fixes I'd need to make, grateful for your suggestions 👍
Nice to have you in the community, I will keep on building more 😃

Thank you @Ingolme! I've applied the changes and now I can successfully control corresponding tabs to their content!

I still encounter a weird behaviour, upon first open, tab group 2 and 3 opens all its tab content. After clicking on any tab in group 2 or 3, the appearance comes back to normal.
--> Here is a demo link of the current stage: https://codestudy.w3spaces.com/pricingtablev4-2021-10-27.html
 

I've set up the first tab (1 device) in each tab group as DefaultOpen, here is the code for the first tab group

<button class="tablinks tabs1" style="width:33.3%" onclick="openPlan(event, 'c11', 'tabs1', 'content1')" id="defaultOpen">1</button>
<button class="tablinks tabs1"style="width:33.3%" onclick="openPlan(event, 'c12', 'tabs1', 'content1')">5</button>
<button class="tablinks tabs1" style="width:33.3%" onclick="openPlan(event, 'c13', 'tabs1', 'content1')">10</button>

In the script it states like this

document.getElementById("defaultOpen").click();

However apart from tab group 1, the other two tab groups seem not to follow this logic.
Do you have tips on further changes to make it work? Thank you!
 

Thank you @Ingolmeso much for the explicit tips! I will give it a try!

Here is the current buggy look of my 3 column pricing tables, I will follow your suggestions from here
https://codestudy.w3spaces.com/pricingtablev3-2021-10-26.html

One additional question to clarify the naming logic, when marking each tab button with a class name such as "tablinks tabs1"
I will need to name all 9 tabs  (from 3 tables) and also 9 content boxes from 1 to 9, do I understand it right? Therefore from "tablinks tabs1", "tablinks tabs2"...to "tablinks tabs9", and from "tabcontent content1" to "tabcontent content9"

I also attach a screenshot of my current progress, which shows how many variables are there in total.

12 hours ago, Rachel W said:

I am trying to build a pricing table listed in 3 columns. There shall be in total 3 pricing table, each pricing table has 2-3 different toggle options.
Here is one example of pricing table I built with 3 tabs  https://prnt.sc/1xcxjqk
I was following this W3 Schools tutorial to build the pricing table https://www.w3schools.com/howto/howto_js_tabs.asp

I am struggling to find a way to display all 3 pricing tables side by side on desktop, and responsive on mobile.

• If I insert the pricing tables individually in a 3 columns WP page, the tab behaviour doesn't function properly - no matter which pricing tables I click, only the first one reacts with correspondent content
• Or maybe I shall directly code the 3 pricing tables on one page and make them responsive, not sure how...

Looking for your tips!

I am trying to build a pricing table listed in 3 columns. There shall be in total 3 pricing table, each pricing table has 2-3 different toggle options.
Here is one example of pricing table I built with 3 tabs  https://prnt.sc/1xcxjqk
I was following this W3 Schools tutorial to build the pricing table https://www.w3schools.com/howto/howto_js_tabs.asp

I am struggling to find a way to display all 3 pricing tables side by side on desktop, and responsive on mobile.

• If I insert the pricing tables individually in a 3 columns WP page, the tab behaviour doesn't function properly - no matter which pricing tables I click, only the first one reacts with correspondent content
• Or maybe I shall directly code the 3 pricing tables on one page and make them responsive, not sure how...

Looking for your tips!