jQuery toggleClass example

Toggle class name on click in jQuery

HTML

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

CSS

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

JavaScript

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');
  }
}