Show and hide div depending on classes

Question

Pardon this stupid question, I'm not a developer.

I have a div which has either one

<div class="blue"></div>

or two classes

<div class="blue active"></div>

In case the class is blue active I want to set the div below to display:block. In case the it is blue I want to set it to display:none.

<div class="red"></div>

Any idea how to do this with jQuery?

The question is when do you want to hide/block the div? On page loading? Or on every click on the div? — Engin, Oct 19 '22 at 18:52
You could just use css, depending on the platform (that is, if you have control over the css) — Nikki9696, Oct 19 '22 at 18:57
I want to hide it on page loading. Class `active` is added or removed dynamically by another script — alexander, Oct 19 '22 at 18:57
Change your css to `.blue ~ .red { display:block; } .blue.active ~ .red { display:none; }` (you might not need the first one, as that's the default) — freedomn-m, Oct 19 '22 at 18:58
Does this answer your question? [CSS rule to apply only if element has BOTH classes](https://stackoverflow.com/questions/5796654/css-rule-to-apply-only-if-element-has-both-classes) — CBroe, Oct 20 '22 at 10:41

score 0 · Answer 1 · answered Oct 20 '22 at 10:47

any idea how to do this with jquery?

Not all solutions need a javascript solution, in this case a small change to your css is all you need.

.blue.active ~ .red { display:none; }

This states: when .blue is also .active then any siblings that are .red will be hidden.

You could also use

.blue.active + .red { display:none; }

if you know that .red is the very next element.

Example snippet:

$(".blue").click(function() { $(this).toggleClass("active"); });

.active { color: blue; }
.blue.active ~ .red { display:none }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='blue'>click me</div>
<div class='red'>changes</div>

As jquery uses css selectors (or close enough) you can do the same with jquery, or use another method to find the .red element, here's some examples where this is the .blue element that's changing:

// must be the next element
$(this).toggleClass("active").next().toggle();

// next sibling
$(this).toggleClass("active").nextAll(".red").first().toggle();

// may also be before, but must still be a sibling
$(this).toggleClass("active").siblings(".red").toggle();

// red anywhere within the same "wrapper", so doesn't need to be a sibling
// (useful for tables where .wrapper = `tr`)
$(this).toggleClass("active").closest(".wrapper").find(".red").toggle();

// using the same as the css, if `this` is not the .blue element
// but will need additional code to reappear when .blue is not active
$(".blue.active ~ .red").hide();

$(".blue").click(function() {
  $(this).toggleClass("active")
  $(".red").show();
  $(".blue.active ~ .red").hide();
});

.active {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='wrapper'>
  <div class='blue'>click me</div>
  <div class='red'>changes</div>
</div>

Show and hide div depending on classes

1 Answers1