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

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

<div >
  <div ></div>
  <div ></div>
</div>
<div >
  <div ></div>
  <div ></div>
</div>
<div >
  <div ></div>
  <div ></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?

CodePudding user response：

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 >
  <div >b</div>
  <div >c</div>
</div>
<div >
  <div >b</div>
  <div >c</div>
</div>
<div >
  <div >b</div>
  <div >c</div>
</div>
</div>

https://jsfiddle.net/86ku05hp/

CodePudding user response：

You need something like this:

$('.a .b').click(function() {
  $(".c").removeClass("vis");
  $(this).next().addClass("vis")
})

When .b is clicked, it will remove class vis from all .c, and add it to the .c in connection to the clicked .b

Demo

$('.a .b').click(function() {
  $(".c").removeClass("vis");
  $(this).next().addClass("vis")
})

$(document).click(function(e) {
  if (!$(e.target).hasClass("b") && !$(e.target).parent().hasClass("b")) {
    $(".c").removeClass("vis");
  }
});

.vis {
  color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >
  <div >b</div>
  <div >c</div>
</div>
<div >
  <div >b</div>
  <div >c</div>
</div>
<div >
  <div >b</div>
  <div >c</div>
</div>

CodePudding user response：

    let b = document.querySelectorAll(".b");
    let c = document.querySelectorAll(".c");
    
    b.forEach(elem => {
      elem.addEventListener("click", () => {
        c.forEach(el => el.classList.remove("vis"));
        elem.nextElementSibling.classList.add("vis");
      });
    });

body {
  font-family: sans-serif;
}

.b {
  font-size: 40px;
  background: red;
  text-align: center;
  cursor: pointer;
}

.c {
  font-size: 40px;
  background: green;
  text-align: center;
  cursor: pointer;
  display: none;
}

.vis {
  display: block;
}

 <div >
      <div >b</div>
      <div >c</div>
    </div>
    <div >
      <div >b</div>
      <div >c</div>
    </div>
    <div >
      <div >b</div>
      <div >c</div>
    </div>