Insert toggle pricing table in columns

[Rachel W]

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!

[Ingolme]

The W3Schools code needs a bit of tweaking if you want more than one on the page because its code affects all of the elements with the "tablinks" and "tabcontent" class name, no matter where on the page it is.

To fix this with few changes to the existing code, each set of links and content boxes will need to identify which tab group it belongs to with a class name. The easiest way is to replace "tablinks" and "tabcontent" with variables that are passed into the openCity() function.

A tab would look like this:

<!-- A tab in the first tab group -->
<button class="tablinks tabs1" onclick="openCity(event, 'London', 'tabs1', 'content1')">London</button>


<!-- A tab in the second tab group -->
<button class="tablinks tabs2" onclick="openCity(event, 'Paris', 'tabs2', 'content2')">Paris</button>

The content box would look like this:

<!-- A content box from the first group -->
<div id="London" class="tabcontent content1">


<!-- A content box from the second group -->
<div id="Paris" class="tabcontent content2">

And the openCity() function would updated to work with the above changes like this:

function openCity(evt, cityName, tabclass, contentclass) {
  // Declare all variables
  var i, tabcontent, tablinks;

  // Get all elements with class=[contentclass] and hide them
  tabcontent = document.getElementsByClassName(contentclass);
  for (i = 0; i < tabcontent.length; i++) {
    tabcontent[i].style.display = "none";
  }

  // Get all elements with class=[tabclass] and remove the class "active"
  tablinks = document.getElementsByClassName(tabclass);
  for (i = 0; i < tablinks.length; i++) {
    tablinks[i].className = tablinks[i].className.replace(" active", "");
  }

  // Show the current tab, and add an "active" class to the button that opened the tab
  document.getElementById(cityName).style.display = "block";
  evt.currentTarget.className += " active";
} 

I've kept the tablinks and tabcontent classes on these groups so that the CSS styles would apply to all of them in the same way, they're not needed for the Javascript to work.

[Rachel W]

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!

 

[Ingolme]

Since you only have three tab groups, you only need three classes, not nine.

You will just need to add classes tabs1, tabs2 or tabs3 to the buttons depending on which group they belong to. The content boxes will have classes content1, content2 or content3 depending on which of the three groups they belong to.

You won't need a unique class name for each item, but you will need a unique id attribute for each content box.

[Rachel W]

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!
 

[Ingolme]

An id attribute needs to be unique, which means that only one element on the page can have a specific id. If you have more than one element with the same id then the browser will not know which one to choose.

For each of the groups you will need a different id to mark which button should be clicked, which you can call defaultOpen1, defaultOpen2 and defaultOpen3.

Then you need to write three lines of Javascript, one for each tab group:

document.getElementById("defaultOpen1").click();
document.getElementById("defaultOpen2").click();
document.getElementById("defaultOpen3").click();

 

Your HTML has a few mistakes which you should consider fixing because they might interfere with the Javascript and CSS. Here's the list of problems shown by the W3C validator: https://validator.w3.org/nu/?doc=https%3A%2F%2Fcodestudy.w3spaces.com%2Fpricingtablev4-2021-10-27.html

The two most notable problems are:

1. Certain elements as direct children of a <ul> element. The <ul> can only have <li> as children, so other elements should be inside an <li>
2. Missing space between attributes here:

   <button class="tablinks"style="width:33.3%"

[Rachel W]

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 😃

[Rachel W]

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!

[Ingolme]

This is why I said that the HTML validation errors need to be fixed. If you fix these validation errors, then it will work correctly:

https://validator.w3.org/nu/?doc=https%3A%2F%2Fcodestudy.w3spaces.com%2Fmcafeev2-2021-10-29.html

The opening and closing tags aren't matching properly. Extra closing </div> tags in your code are causing the wordpress layout to break.

If you indent your code it will become apparent:

    <div class="columns">
        <div class="tab">
            <ul class="price">
                ...
                <!-- <div> cannot be a direct child of <ul> -->
                <div id="c11" class="tabcontent content1">
                    <!-- <li> cannot be a child of </div> -->
                    <li class="fee"></li>
                    ...
                    ...
            </ul> <!-- Unexpected closing </ul> tag -->
      
        </div><!-- Unexpected closing </div> tag -->

        <div id="c12" class="tabcontent content1">
            <ul class="price">
                <li class="fee"></li>
                ...
                ...
            </ul>
        </div>
    </div><!-- <div class="columns"> ended here -->

</div><!-- This <div> tag is messing with the wordpress theme -->

<!-- Even more mismatched tags are happening below here -->
<div class="columns">
    <div class="tab">
        <ul class="price">

 

 

[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!👍