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

Astw41
October 5, 2022
214 views
3 votes
3 Answers

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?

Answers

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 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>

    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 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>

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/

Please signup or login to give your own answer.

Click here to cancel reply.

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

Answers