I have 3 button and if i press the button 1 it should change the color (i add some class) it should act as a toggle function also, and if i click the button 2 ( while the button 1 active ) button 1 shold not active anymore and button 2 start to active and so on.. i try write some code and it seems not working, here is my code in fiddle.

$('.btn').on("click", function() {
  if ($(this).hasClass("price-filter-active")) {
    $(this).removeClass("price-filter-active");
  } else {
    $(this).addClass("price-filter-active");
  }
})

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

<script src=".1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
      button 1
      <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
      button 2
    </button>

    <button class="span2 btn">
      button 3
    </button>
  </div>
</div>

I have 3 button and if i press the button 1 it should change the color (i add some class) it should act as a toggle function also, and if i click the button 2 ( while the button 1 active ) button 1 shold not active anymore and button 2 start to active and so on.. i try write some code and it seems not working, here is my code in fiddle.

$('.btn').on("click", function() {
  if ($(this).hasClass("price-filter-active")) {
    $(this).removeClass("price-filter-active");
  } else {
    $(this).addClass("price-filter-active");
  }
})

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
      button 1
      <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
      button 2
    </button>

    <button class="span2 btn">
      button 3
    </button>
  </div>
</div>

• javascript
• jquery

7 Answers 7

To achieve this you simply need to call removeClass() on any element that has the class you're adding. You can also simplify the logic which toggles the class by using toggleClass(), like this:

$('.btn').on("click", function() {
  $('.price-filter-active').not(this).removeClass('price-filter-active');
  $(this).toggleClass('price-filter-active');
})

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

button { 
  outline: 0; /* only to remove the ugly blue outline in this demo */
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
       button 1
       <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
       button 2
    </button>

    <button class="span2 btn">
       button 3
    </button>
  </div>
</div>

Note that this method has the additional benefit of allowing the currently active button to be de-selected by clicking it again.

You can do this fairly simply just adapting your code: Just remove the class price-filter-active from all .btn's before adding it to the press one in the second half of the if statement.

$('.btn').click(function() {
  if ($(this).hasClass("price-filter-active")) {
    $(this).removeClass("price-filter-active");
  } else {
    $('.btn').removeClass("price-filter-active");
    $(this).addClass("price-filter-active");
  }
});

$('.btn').click(function() {
  if ($(this).hasClass("price-filter-active")) {
    $(this).removeClass("price-filter-active");
  } else {
    $('.btn').removeClass("price-filter-active");
    $(this).addClass("price-filter-active");
  }
});

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
      button 1
      <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
      button 2
    </button>

    <button class="span2 btn">
      button 3
    </button>
  </div>
</div>

But there is a shorter way of doing it:

You can catch clicks on .btn like this:

$('.btn').click(function() {
});

Inside that, we need to take away the class price-filter-active on all the buttons except the on clicked on:

  $('.btn').not(this).removeClass("price-filter-active");

Then just toggle the class on the div clicked on:

  $(this).toggleClass("price-filter-active");

Here is the full code:

$('.btn').click(function() {
  $('.btn').not(this).removeClass("price-filter-active");
  $(this).toggleClass("price-filter-active");
});

$('.btn').click(function() {
  $('.btn').not(this).removeClass("price-filter-active");
  $(this).toggleClass("price-filter-active");
});

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
      button 1
      <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
      button 2
    </button>

    <button class="span2 btn">
      button 3
    </button>
  </div>
</div>

1. Use .toggleClass()
2. To remove and add class

$('.btn').on("click", function() {

$('.btn.price-filter-active').toggleClass('price-filter-active')
  $(this).toggleClass("price-filter-active")
   
})

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}

.price-filter-active {
  background: #42B549;
  color: white;
}

.price-filter-active:hover {
  background: #42B549;
  color: white;
}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="price-filter-container">
  <div class="row-fluid">
    <button class="span2 btn">
       button 1
        <i class="image-official-store"></i>
    </button>

    <button class="span2 btn">
       button 2
    </button>

    <button class="span2 btn">
       button 3
    </button>
  </div>

Try this way: https://jsfiddle/zr3mx2h0/

$('.btn').on("click", function(){
	$('.btn.price-filter-active').removeClass("price-filter-active");
  $(this).addClass("price-filter-active");
})

.price-filter-container {
  width: 1190px;
  max-width: 100%;
  margin: 0 auto;
}
.price-filter-active {
  background: #42B549;
  color: white;
}
.price-filter-active:hover {
  background: #42B549;
  color: white;
}

<script type="text/javascript" src="https://cdnjs.cloudflare./ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="price-filter-container">
    <div class="row-fluid">
        <button class="span2 btn">
           button 1
            <i class="image-official-store"></i>
        </button>

        <button class="span2 btn">
           button 2
        </button>

        <button class="span2 btn">
           button 3
        </button>
    </div>
</div>

You can first remove the .price-filter-active class from all button and then add it to the clicked button on click event handler.

$(document).ready(function(){
  $('.btn').on("click", function(){
        $('.btn').removeClass("price-filter-active");
        $(this).addClass("price-filter-active");
  })
});

Please check it in the jsbin .

Easiest thing in the world with jQuery.

$('.btn').on("click", function(e){
$( event.target ).addClass("price-filter-active");
  $('.btn').not(this).removeClass("price-filter-active");

})

Use event.target instead of this. Make sure to wrap event.target in the jQuery object and you are good to go.

You could use this or event.target here, it would not matter, I just shown both concepts, and event.target and this are not always the same.

So jQuery has this amazing not() method and it's chainable.

Here is the link

https://codepen.io/damianocel/pen/BdZbYb

$(document).ready(function(){
$(".btn").click(function(){
$(".btn").removeClass("btn1");
$(this).addClass("btn1")
});
		});

.btn1{
background: #42B549;
  color: white;
		}

<script src="https://ajax.googleapis./ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	<button class="btn">button1</button>
	<button class="btn">button2</button>
	<button class="btn">button3</button>