Choose Your Membership

doTERRA
Monthly
Apprentice Member

Build Your Business to Elite
$ 10 Monthly
  •  
  • List Item #2
  • List Item #3

doTERRA
Monthly
Team Leader Member

Build Your Business to Silver+
$ 20 Monthly
  • List Item #1
  • List Item #2
  • List Item #3
Popular

doTERRA
Monthly
Freedom Builder Member

Build Your Business to Diamond+
$ 50 Monthly
  • Yearly or Lifetime Only
  • Proof of Silver Rank Required
  •  

doTERRA
Yearly
Apprentice Member

Build Your Business to Elite
$ 99 Yearly
  • $8.25/mo
  • List Item #2
  • List Item #3

doTERRA
Yearly
Team Leader Member

Build Your Business to Silver+
$ 199 Yearly
  • $16.58/mo
  • List Item #2
  • List Item #3
Popular

doTERRA
Yearly
Freedom Builder Member

Build Your Business to Diamond+
$ 599 Yearly
  • $50/mo
  •  
  • Proof of Silver Rank Required

doTERRA
LIFETIME
Apprentice Member

Build Your Business to Elite
$ 197 Lifetime
  • $8.25/mo
  • List Item #2
  • List Item #3

doTERRA
LIFETIME
Team Leader Member

Build Your Business to Silver+
$ 397 Lifetime
  • $16.58/mo
  • List Item #2
  • List Item #3
Popular

doTERRA
LIFETIME
Freedom Builder Member

Build Your Business to Diamond+
$ 1197 Lifetime
  • $50/mo
  •  
  • Proof of Silver Rank Required

selector{
    –inactive-color: #3e6bbc;
    –padding: 5px;
    –size: 23px;
}
selector.monthly .elementor-widget-container{
    background: var(–inactive-color);
}
selector .elementor-divider{
    position: relative;
    cursor: pointer;
}
selector .elementor-divider:after{
    content: “”;
    position: absolute;
    top: var(–padding);
    left: calc(100% – var(–size) – var(–padding));
    height: var(–size);
    width: var(–size);
    background: #fff;
    border-radius: 100%;
    transition: all 0.3s ease-in-out;
}
selector.monthly .elementor-divider:after{
    left: var(–padding);
}

three position toggle CSS code

selector {
    –inactive-color: #3e6bbc;
    –active-color: #00cc00; /* Change this to your desired active color */
    –padding: 5px;
    –size: 23px;
}

selector.monthly .elementor-widget-container {
    background: var(–active-color);
}

selector.annual .elementor-widget-container {
    background: var(–active-color); /* Change this to your desired active color */
}

selector .elementor-divider {
    position: relative;
    cursor: pointer;
}

selector .elementor-divider:after {
    content: “”;
    position: absolute;
    top: var(–padding);
    left: calc(100% – var(–size) – var(–padding));
    height: var(–size);
    width: var(–size);
    background: #fff;
    border-radius: 100%;
    transition: all 0.3s ease-in-out;
}

selector.monthly .elementor-divider:after {
    left: var(–padding);
}

selector.annual .elementor-divider:after {
    left: calc(50% – var(–size) / 2);
}

three position toggle javascript code

document.addEventListener(“DOMContentLoaded”, function() {
    const toggle = document.querySelector(‘selector .elementor-divider’);
    const section1 = document.querySelector(‘.pricing-tables-1’); // Replace ‘.section1’ with the selector of your first section
    const section2 = document.querySelector(‘.pricing-tables-2’); // Replace ‘.section2’ with the selector of your second section
    const section3 = document.querySelector(‘.pricing-tables-3’); // Replace ‘.section3’ with the selector of your third section

    // Initial state
    toggle.classList.add(‘monthly’); // Set initial active state
    section1.style.display = ‘block’; // Show section1
    section2.style.display = ‘none’; // Hide section2 initially
    section3.style.display = ‘none’; // Hide section3 initially

    // Toggle function
    toggle.addEventListener(‘click’, function() {
        if (toggle.classList.contains(monthly’)) {
            toggle.classList.remove(‘monthly’);
            toggle.classList.add(‘annual’);
            section1.style.display = ‘none’; // Hide section1
            section2.style.display = ‘block’; // Show section2
            section3.style.display = ‘none’; // Hide section3
        } else if (toggle.classList.contains(‘annual’)) {
            toggle.classList.remove(‘annual’);
            toggle.classList.add(‘lifetime’);
            section1.style.display = ‘none’; // Hide section1
            section2.style.display = ‘none’; // Hide section2
            section3.style.display = ‘block’; // Show section3
        } else { // If toggle has class ‘lifetime’
            toggle.classList.remove(‘lifetime’);
            toggle.classList.add(‘monthly’);
            section1.style.display = ‘block’; // Show section1
            section2.style.display = ‘none’; // Hide section2
            section3.style.display = ‘none’; // Hide section3
        }
    });
});

two position toggle javascript code

<style>
.x: pricing-tables-2{
    display: none;
}
</style>
<script src=”https://code.jquery.com/jquery-3.6.0.js”></script>
<script>
var $ = jQuery

$(document).ready(function(){
$(‘.price-toggle’).on(‘click’, function(){
    $(this).toggleClass(‘monthly’)
    $(‘.pricing-tables’).toggle()
})
})
</script>