If parent div has specific class toggle another div using JS

Question

How can I display a div if a parent div has a specific class using JS?

In the code below I would like to display the div with class .hidden-gray only if parent div below has class .matched and child div has class .gray.

And, the div with class .hidden-purple only if parent below div has class .matched and child div has class .purple.

<div class="hidden-gray">
Display this div only if parent div has class .matched AND child div has class .gray
</div>

<div class="hidden-purple">
Display this div only if parent div has class .matched AND child div has class .purple
</div>

<div class="turn matched" id="1">
    <div class="tile gray">
        <div class="face front" style="background-color: transparent;">
            <img src="https://via.placeholder.com/336x221">
        </div>
    </div>
</div>
      
<div class="turn matched" id="2">
    <div class="tile purple">
        <div class="face front" style="background-color: transparent;">
            <img src="https://via.placeholder.com/336x221">
        </div>
    </div>
</div>

CSS

 .mystyle {
 width: 100%;
 padding: 25px;
 background-color: coral;
 color: white;
 font-size: 25px;
 box-sizing: border-box;
 }

.turn {
 margin-top: 10px;
}

.hidden-gray {
 padding: 20px;
 background-color: gray;
 color: white;
 margin-bottom: 10px;
}

.hidden-purple {
 padding: 20px;
 background-color: purple;
 color: white;
 margin-bottom: 10px;
}

Many thanks!

JSFiddle here

Hey actually I can't understand this problem. Which is the "parent div" of .hidden-purple? — Musafiroon
– Musafiroon, Commented Jan 15, 2022 at 6:06
this div that ha class a child div with class purple <div class="turn matched" id="2"> <div class="tile purple"> @Musafiroon — A-creative
– A-creative, Commented Jan 15, 2022 at 6:22

John · Accepted Answer · 2022-01-15 12:37:04Z

1

Here's one way of doing it. Here's the JS code I added:

let x = document.getElementById("1");
let y = document.getElementById("2");
let firstChildx = x.children;  
let firstChildy = y.children; 

if (x.className.indexOf('matched') != '-1' && firstChildx[0].className.indexOf('gray')!= '-1') {
let hideg = document.getElementsByClassName("hidden-gray");
hideg[0].style.display = 'block';
}

if (y.className.indexOf('matched') != '-1' && firstChildy[0].className.indexOf('purple')!= '-1' ) {
let hideg = document.getElementsByClassName("hidden-purple");
hideg[0].style.display = 'block';
}

I set .hidden-grayand .hidden-purple to display:none; and then used the js code to check through the class names of the parent div and the first child of the parent div and if it matched the criteria I set the display back to block.

And here it is working:

let x = document.getElementById("1");
let y = document.getElementById("2");
let firstChildx = x.children;  
let firstChildy = y.children; 

if (x.className.indexOf('matched') != '-1' && firstChildx[0].className.indexOf('gray')!= '-1') {
let hideg = document.getElementsByClassName("hidden-gray");
hideg[0].style.display = 'block';
}

if (y.className.indexOf('matched') != '-1' && firstChildy[0].className.indexOf('purple')!= '-1' ) {
let hideg = document.getElementsByClassName("hidden-purple");
hideg[0].style.display = 'block';
}

.mystyle {
  width: 100%;
  padding: 25px;
  background-color: coral;
  color: white;
  font-size: 25px;
  box-sizing: border-box;
}

.turn {
  margin-top: 10px;
}

.hidden-gray {
  padding: 20px;
  background-color: gray;
  color: white;
  margin-bottom: 10px;
  display: none;
}

.hidden-purple {
  padding: 20px;
  background-color: purple;
  color: white;
  margin-bottom: 10px;
  display: none;
}

<div class="hidden-gray">
Display this div only if parent div has class .matched and child div has class .gray
</div>

<div class="hidden-purple">
Display this div only if parent div has class .matched and child div has class .gray
</div>


<div class="turn matched" id="1">
        <div class="tile gray">
            <div class="face front" style="background-color: transparent;">
                <img src="http://via.placeholder.com/336x221">
            </div>
        </div>
    </div>
  
  <div class="turn" id="2">
        <div class="tile purple">
            <div class="face front" style="background-color: transparent;">
                <img src="http://via.placeholder.com/336x221">
            </div>
        </div>
    </div>

edited Jan 15, 2022 at 12:37

answered Jan 15, 2022 at 6:10

John

5,3621 gold badge8 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

A-creative Over a year ago

hi John :) If I run the code both Purple and Gray div are visible but the purple div should be hidden, right? Because this div does not contains the class .matched

<div class="turn" id="2">     <div class="tile purple">     <div class="face front" style="background-color: transparent;">     <img src="http://via.placeholder.com/336x221">      </div>      </div>     </div>

John Over a year ago

@A-creative I apologize, I forgot to add part of the if statement. I have updated my answer.

Jello · Accepted Answer · 2022-01-15 05:57:00Z

0

You can try this.

First, add .hidden class to hide your hidden-* div.

.hidden {
  display: none;
}

and add js (check the link).

answered Jan 15, 2022 at 5:57

Jello

4243 silver badges10 bronze badges

Collectives™ on Stack Overflow

If parent div has specific class toggle another div using JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related