Home Hide other divs when clicking another div with the same class or clicking somewhere else

Questions

Hide other divs when clicking another div with the same class or clicking somewhere else

October 5, 2022

I want to make a list of divs, like that:

<div class="a">
  <div class="b"></div>
  <div class="c"></div>
</div>
<div class="a">
  <div class="b"></div>
  <div class="c"></div>
</div>
<div class="a">
  <div class="b"></div>
  <div class="c"></div>
</div>

When you click on a div.b, div.c (only from the same div.a parent) should have a .vis class added. When you click on another div.b it adds the class to its sibling (div.c) and removes the class from the last clicked div.c. When don’t click div.b, but somewhere else, the .vis class is removed from every div.c.

window.onclick = function(window) {

    if(window.target.className === 'b'){

        $(".b").each(function() {

            $(".b").on("click", function(){
                $(this).siblings(".c").addClass("vis");
            })

        })

    } else {
        $(".c").removeClass("vis");
    }

}

The code above doesn’t work as it should. I have to click 2 times to add the class (First it executes the function to check the target class and the second click adds the class).
When I click on another div.b the .vis class from the click before isn’t removed (so I have a few divs with .vis class, but I should have only 1 at a time).
How can I make this work?

>Solution :

Try this

window.onclick = function(e) {
  if(e.target.className === 'b'){
    // removing vis class from all c divs
        $('.a .c').removeClass('vis');
    // Add vis class to the sibling div 
    $(e.target).siblings().addClass('vis');
  }
  else {
  //When clicking outside of b remove vis class from all c div
  $('.a > .c').removeClass('vis');
  }
}

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#banner-message {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  transition: all 0.2s;
  margin: 0 auto;
  width: 300px;
}

.vis {
  background-color: red;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="banner-message">
<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
</div>
<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
</div>
<div class="a">
  <div class="b">b</div>
  <div class="c">c</div>
</div>
</div>

https://jsfiddle.net/86ku05hp/