Morgari Morgari - 16 days ago 5
CSS Question

How can I unhighlight not active block

Mates, I have the following code. If I click a table, it highlights and then if I click another, the previous one remains lit up and so does the next one I had pressed. How can I edit it so that if I click another table, the previous one unhighlights?



$('.pricing-customer').on('click', function(){
$(this).toggleClass('active');
$(this).children().toggleClass('active');
});

.pricing-customer {
background: #fff;
min-height: 250px;
cursor: pointer;
transition: all .3s ease-in-out;
margin-bottom: 20px;
padding: 10px 0px 25px 0px;
}
p.pricing-number {
font-size: 52px;
margin-bottom: 10px;
margin-top: 20px;
color: #fead0d;
}
p.pricing-monthes {
color: #5e6977;
font-size: 14px;
line-height: 21px;
padding-bottom: 20px;
border-bottom: 1px solid #e1e8ee;
}
p.emails {
color: #444;
font-size: 16px;
line-height: 21px;
}
.pricing-customer:hover, .pricing-customer.active {

background-color: #333;
}
.pricing-customer:hover p , .pricing-customer p.active{
color: #fff;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-customer col-sm-12 col-sm-3 text-center">
<h3><?php echo $t_title; ?></h3>
<p class="pricing-number">$ 70</p>
<br>
<p class="pricing-monthes">per week/month</p>
<p class="pricing-emails">100 000 emails</p>
</div>

<div class="pricing-customer col-sm-12 col-sm-3 text-center">
<h3><?php echo $t_title; ?></h3>
<p class="pricing-number">$ 70</p>
<br>
<p class="pricing-monthes">per week/month</p>
<p class="pricing-emails">100 000 emails</p>
</div>

<div class="pricing-customer col-sm-12 col-sm-3 text-center">
<h3><?php echo $t_title; ?></h3>
<p class="pricing-number">$ 70</p>
<br>
<p class="pricing-monthes">per week/month</p>
<p class="pricing-emails">100 000 emails</p>
</div>




Answer

Use siblings instead of children. I hope this is what your looking for.

$('.pricing-customer').on('click', function(){
  $(this).toggleClass('active');
  $(this).siblings().removeClass('active');
});
.pricing-customer {
  background: #fff;
  min-height: 250px;
  cursor: pointer;
  transition: all .3s ease-in-out;
  margin-bottom: 20px;
  padding: 10px 0px 25px 0px;
}
p.pricing-number {
  font-size: 52px;
  margin-bottom: 10px;
  margin-top: 20px;
  color: #fead0d;
}
p.pricing-monthes {
  color: #5e6977;
  font-size: 14px;
  line-height: 21px;
  padding-bottom: 20px;
  border-bottom: 1px solid #e1e8ee;
}
p.emails {
  color: #444;
  font-size: 16px;
  line-height: 21px;
}
.pricing-customer:hover, .pricing-customer.active {

 background-color: #333;
}
.pricing-customer:hover p , .pricing-customer.active p{
  color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="pricing-customer col-sm-12 col-sm-3 text-center">
  <h3><?php echo $t_title; ?></h3>
  <p class="pricing-number">$ 70</p>
  <br>
  <p class="pricing-monthes">per week/month</p>
  <p class="pricing-emails">100 000 emails</p>
</div>

<div class="pricing-customer col-sm-12 col-sm-3 text-center">
  <h3><?php echo $t_title; ?></h3>
  <p class="pricing-number">$ 70</p>
  <br>
  <p class="pricing-monthes">per week/month</p>
  <p class="pricing-emails">100 000 emails</p>
</div>

<div class="pricing-customer col-sm-12 col-sm-3 text-center">
  <h3><?php echo $t_title; ?></h3>
  <p class="pricing-number">$ 70</p>
  <br>
  <p class="pricing-monthes">per week/month</p>
  <p class="pricing-emails">100 000 emails</p>
</div>