Question posted in
The full documentation can be found here.

Divi theme – Divi: how to change button apperance on click another one

I have these 2 buttons on Divi builder. My aim: when I click on "button 2", this one becomes in orange and "button 1" becomes in grey, and the opposite.

enter image description here

On Button setup (from the builder), I set empty Link field for these 2 buttons. BUT when I click, my current web page is reloaded…

I’ve added this script into Divi Theme Option > Integration > header, just to catch the click on the first button:

jQuery(function ($) {
    $( document ).ready(function() {
        $(".button1").on("click", function(){
            event.preventDefault();
            alert("Button clicked");
        });
    });
});

And for this Button 1, I set the CSS Class:

enter image description here

The result: no click is catched…

Could you help me guys to do my final aim please?

Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I've added this script:

    jQuery(function ($) {
    
    $( document ).ready(function() {
        
        $(".button1").on("click", function(){
            event.preventDefault();
            $(".button2").removeClass('orange').addClass('gray');
            $(".button1").removeClass('gray').addClass('orange');
            $('.price').text("MOIS");
        });
        
        $(".button2").on("click", function(){
            event.preventDefault();
            $(".button1").removeClass('orange').addClass('gray');
            $(".button2").removeClass('gray').addClass('orange');
            $('.price').text("ANNÉE");
        });
    });
});

    And this custom CSS:

    button.orange{
  border:1px solid #efa100;
}
button.gray{
  border:1px solid #8f8f8f;
}

    The click on buttons works fine ("price" text is updated successfuly), BUT the button apparence doesn't change...


  2. 0

    Please try this instead,

    I created two class orange and gray for border style

    button.orange{
  border:2px solid orange;
}
button.gray{
  border:2px solid gray;
}

    Then, button click event add class gray and remove it class orange and also add siblings to orange color and remove it’s gray color.

    $(this).removeClass("orange").removeClass("gray");
$(this).addClass("gray");
$(this).siblings().addClass("orange").removeClass("gray");

    jQuery(function ($) {
    $( document ).ready(function() {
        $("button").on("click", function(){
            event.preventDefault();
            $(this).removeClass("gray").removeClass("orange");
            $(this).addClass("orange");
            $(this).siblings().addClass("gray").removeClass("orange");
        });
    });
});
    button{
  border:none;
  padding:10px 20px;
  border-radius:8px;
  color:#111;
}
button.orange{
  border:2px solid orange;
  color:orange;
}
button.gray{
  border:2px solid gray;
  color:gray;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="button1">Button1</button>
<button class="button2">Button2</button>
    Login or Signup to reply.
  3. 0

    You can try this one out. Ignore the CSS, the main part is jQuery code.

    The variable buttons contains the group of elements on which you want to add this feature.

    The "click" event handler is added, and rest is easy to understand.

    jQuery(function($) {
  $(document).ready(function() {
    var buttons = $(".button1").siblings().addBack();
    buttons.on("click", function() {
      $(this).addClass('orange').removeClass('gray');
      buttons.not($(this)).addClass('gray').removeClass('orange');
    });
  });
});
    body {
  padding: 10px 0;
}

div {
  border: none;
  padding: 10px 20px;
  border: 2px solid rgba(0, 0, 0, 0);
  background: #eee;
  display: inline;
  cursor: default;
}

.orange {
  border: 2px solid orange;
  color: orange;
}

.gray {
  border: 2px solid gray;
  color: gray;
}
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="button1">Button1</div>
<div class="button2">Button2</div>
<div class="button3">Button3</div>
<div class="button4">Button4</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search