₦airaland Forum

Just like the title, I'm trying to achieve a result like the screenshot attached, I'm trying to get this to work with 3 pricing layouts, so on click the 7 days trial hide div 2 and 3, it's supposed to be easy but for some reason, I can't figure it out. Guess I need to go back and learn the basics from scratch Any help is greatly appreciated. Thanks.

Code for 2 toggle states I want rewritten to work with 3 states:

<script type="text/javascript">
      // toggle frequency

      function toggleFrequency() {
        var yearlyElement = document.getElementById("yearlyPlans";
        var monthlyElement = document.getElementById("monthlyPlans";
        if (yearlyElement.style.display === "none" {
          yearlyElement.style.display = "block";
          monthlyElement.style.display = "none";
        } else {
          yearlyElement.style.display = "none";
          monthlyElement.style.display = "block";
        }
      }

      window.onload = function () {
        document.getElementById("yearlyPlans".style.display = "none";
        document.getElementById("dropDownMenuMonthly".style.display = "none";
      };

      window.addEventListener("click", function (e) {
        if (document.getElementById("dropdownMonthly".contains(e.target)) {
          document.getElementById("dropDownMenuMonthly".style.display =
            "block";
        } else {
          document.getElementById("dropDownMenuMonthly".style.display = "none";
        }
      });

      window.addEventListener("click", function (e) {
        if (document.getElementById("dropdownYearly".contains(e.target)) {
          document.getElementById("dropDownMenuYearly".style.display = "block";
        } else {
          document.getElementById("dropDownMenuYearly".style.display = "none";
        }
      });

      // toggle dropDown

      function toggleMenu() {
        var monthlyDropdown = document.getElementById("dropDownMenuMonthly";
        var yearlyDropdown = document.getElementById("dropDownMenuYearly";
        if (monthlyDropdown.style.display == "none" {
          monthlyDropdown.style.display = "block";
          yearlyDropdown.style.display = "none";
        } else {
          monthlyDropdown.style.display = "none";
          yearlyDropdown.style.display = "block";
        }
      }
    </script>

You need to understand Tabs.

https://www.w3schools.com/howto/howto_js_tabs.asp

Karleb:
You need to understand Tabs.

https://www.w3schools.com/howto/howto_js_tabs.asp

Not what I wanted but I got it to work by passing onclick function to hide or show divs depending on the ul id clicked. I don't know if it's the right way to do it, but I got no syntax errors and it works just fine. Thanks for your help.

gross Intel. I beg you in the name of God I have been trying to reach you. please Whatsapp me on 07025261602. or drop your whatsapp. please. I have a life threatening issue