Elementor Question posted in
A comprehensive tutorial library can be found here.

Elementor – Jquery change togle switcher CSS class on clicking a button

I have a toggle Switcher with a normal state that displays a price billed monthly and when I click on the switcher it changes to the active class which displays the price billed yearly:

<div class="premium-content-toggle-switcher">
            <div class="premium-content-toggle-heading-one">
                <h3>Billed Monthly</h3>
            </div>
        <div class="premium-content-toggle-button">
            <label class="premium-content-toggle-switch-label">
                <input class="premium-content-toggle-switch premium-content-toggle-switch-normal elementor-clickable" type="checkbox">
                <span class="premium-content-toggle-switch-control elementor-clickable"></span>
            </label>
        </div>
            <div class="premium-content-toggle-heading-two">
                <h3>Billed Yearly</h3>
            </div>
        
                    
    </div>

I want that appart from this switcher, the switcher can toggle from the class normal to active by clicking on a different button:

<a href="#" class="elementor-button-link elementor-button elementor-size-sm" role="button" id="changeButton">
                    <span class="elementor-button-content-wrapper">
                    <span class="elementor-button-text">Click here</span>
    </span>
                </a>

I tried this:

   $(function(){
    $('.changeButton').on('click', function(){
        $(this).toggleClass('premium-content-toggle-switch-active')
    });
});

But doesnt seem to work, what can I do to let the button change the css class of the switcher?

Tags:

2

Answers


  1. 0

    Try

    $('#changeButton').on('click', function() {
    $('.premium-content').toggleClass('premium-content-toggle-switch-active');
});

    The listener should be attached to the ‘#changeButton’ id selector; in the handler, you select the ‘.premium-content’ class elements and toggle their …-switch-active class.

    Login or Signup to reply.
  2. 0

    Use this modified form:

    <div id="selector" class="premium-content-toggle-switcher ">
</div>

$(function(){
    $('#changeButton').on('click', function(){
    $("#selector").toggleClass('premium-content-toggle-switcher premium-content-toggle- 
    switcher-active');
    });
});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search