What is the best way to conceal an element when another element is given a specific class?

Question

What is the best way to conceal an element when another element is given a specific class?

Imagine you have 2 buttons

The first button

<button class="arguments variation-one">Some text</button>

- this button has dynamic classes like: variation-one, variation-two, variation-three, but the .arguments class remains static.

and the second button

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

I need to hide the second button if the first button receives the class .variation-two, without any click events. Whether through js, jQuery, or even css if it is possible. Can someone assist me with this?

I came across a similar problem on this forum and found this solution:

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

I attempted to adapt it to my task, but unfortunately, nothing seems to be working for me

javascript jquery css hide show-hide

Answer 1

Answer №1

Scan for any buttons that possess both the arguments and variation-two classes. If found, conceal the second button that has the 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>

Answer 2

Scan for any buttons that possess both the arguments and variation-two classes. If found, conceal the second button that has the 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>

Answer 3

Answer №2

If the first button contains the variation-one class, the second button will be hidden.

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

Keep in mind that this script executes upon page load. If you wish to dynamically hide and show the second button based on changes to the first button's class, you must run the code each time the class is altered. You can achieve this by creating a named function that is called from all instances where the first button's class changes, or utilize a MutationObserver to automatically detect changes.

Answer 4

If the first button contains the variation-one class, the second button will be hidden.

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

Keep in mind that this script executes upon page load. If you wish to dynamically hide and show the second button based on changes to the first button's class, you must run the code each time the class is altered. You can achieve this by creating a named function that is called from all instances where the first button's class changes, or utilize a MutationObserver to automatically detect changes.

What is the best way to conceal an element when another element is given a specific class?

Answer №1

Answer №2

Similar questions

Notification prompt when removing items

Animating with JQuery utilizing a dynamic attribute

Jquery refuses to conceal a particular element

The auto search feature seems to be malfunctioning after clicking the button

Error: The property 'match' is undefined and cannot be read by Object.j during rendering in angular-datatables.min.js at line 6

Encountered a problem during the insertion of data into the database through ajax and php

Categorize a collection of objects based on shared characteristics

Open in a new tab for enhanced content formatting in Prismic on NextJs

Pattern for Ajax callback in Javascript

What are some techniques for preventing Null Pointer Exception errors?

Having trouble retrieving data in Angular from the TypeScript file

How to present retrieved data with spaces or line breaks in PHP

Guide to increasing a field value in Backendless.com

I'm encountering an issue with the submission button in the wizard, I suspect it could be a problem

Issue with JQuery's click and submit events not triggering, but change event is working fine

Resetting input field based on callback function

Select2.js Dropdown List with Case Sensitivity

Does the sequence matter when studying JavaScript, Ajax, jQuery, and JSON?

sending the AJAX request from back to the original JavaScript function

What methods can be used to send JSON data in the body of an express router.get request?