CODEWITHSUNDEEP
jquery
Adam Pavlov
Adam Pavlov

Reputation: 307

Toggle class should not clicked again

If a button has active class then it should not toggle if I click on it again. Here I have two buttons "Grid View" and "List View" I want when "Grid View" is active and still I click on it this should not toggle active class.

$('.switch-btn').click(function(e){
  $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
});
button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid active">Grid View</button>
<button class="switch-btn list">List View</button>

Upvotes: 3

Views: 96

Answers (3)

Krzysztof Janiszewski
Krzysztof Janiszewski

Reputation: 3854

Change this

$('.switch-btn.grid, .switch-btn.list').toggleClass('active');

to this:

$(".switch-btn").removeClass('active');
$(this).addClass('active');

In your case you always toggle the class, even if an element already has class active. But let's say that none of those buttons has class active. Then your function will add class active to both elements.

(Your version with none elements with class active)

$('.switch-btn').click(function(e){
  $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
});
button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid">Grid View</button>
<button class="switch-btn list">List View</button>

In my solution you firstly remove active class from all elements with class switch-btn and then add to the clicked one.

$('.switch-btn').click(function(e){
  $(".switch-btn").removeClass('active');
  $(this).addClass('active');
});
button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid">Grid View</button>
<button class="switch-btn list">List View</button>

Upvotes: 1

Hearner
Hearner

Reputation: 2709

Check if $(this) has the class 'active'

$('.switch-btn').click(function(e){
  if ($(this).hasClass('active')) {
    $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
  }
});
button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
    background: green;
    color: #FFFFFF;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="switch-btn grid active">Grid View</button>
<button class="switch-btn list">List View</button>

Upvotes: 0

Fadhly Permata
Fadhly Permata

Reputation: 1686

Just add checker for the class existence, like below:

$('.switch-btn').click(function(e){
  const cButton = $(e.currentTarget);
  
  if (cButton.hasClass('active'))
    return;
    
  $('.switch-btn.grid, .switch-btn.list').toggleClass('active');
});
button.switch-btn {
    border: none;
    outline: none;
    padding: 10px 20px;
    cursor: pointer;
}
button.switch-btn.active {
  background: green;
  color: #FFFFFF;
}
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<button class="switch-btn grid active">Grid View</button>
<button class="switch-btn list">List View</button>

Upvotes: 1

Related Questions