skip to Main Content

For example we have 2 button

First button
<button class="arguments variation-one">Some text</button> – this button have dynamic classes like: variation-one, variation-two, variation-three, but class .arguments is static.

and Second button
<button class="simple">Other text</button>

I must hide second button if first button receiving class .variation-two, without on click events. By js, jQuery, or even css if its possible. Please help me.

Im find similar problem on this forum and solution was this script

$(document).ready(function() {
    var $redTags = $('.lt-label');
    if($redTags.hasClass(".lt-offline") {
        $("#l-b-wrapper").hide();
    }
}

I tried to interpret it to suit my task, but nothing worked for me

2

Answers


  1. This will hide the second button if the first button has the variation-one class.

    $(function() {
      $(".simple").toggle(!$(".arguments").hasClass("variation-one"))
    });
    

    Note that this runs when the page is first loaded. If you want to hide and show the second button dynamically when the first button’s class changes, you need to run the code every time it changes. Either put this in a named function that you call from all the places that change the first button’s class, or use MutationObserver to detect changes automatically.

    Login or Signup to reply.
  2. Check if there’s any buttons that has arguments and variation-two classes. If there’s, hide the second button with simple class.

    $(document).ready(function() {
        let element = $(".arguments.variation-two");
        if(element.length > 0) {
            $(".simple").hide();
        }
    });
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    
    <button class="arguments variation-two">Some Text</button> 
    <button class="simple">Other Text</button>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search