CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap
naveed Softdukan
naveed Softdukan

Reputation: 89

Get Active Class in Bootstrap on Click

I have 3 options to choose.

There is an active class for on click but as I click it does not change to 2nd or 3rd option.

Is there any bootstrap built-in function if not then how can I get this on click :

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">WordPress Theme Pro</h4>
        <p class="list-group-item-text">$ 15.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Premium</h4>
        <p class="list-group-item-text">$ 25.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Agency</h4>
        <p class="list-group-item-text">$ 35.00</p>
    </a>
</div>

Upvotes: 1

Views: 5938

Answers (3)

Ryad Boubaker
Ryad Boubaker

Reputation: 1501

Simply you remove the active class from the other elements and add it to the clicked element.
By the way I recommend that you use another html tag instead of <a></a>

$(document).ready(function() {
    $('.list-group-item').click(function() {
        $('.list-group-item').removeClass('active');
        $(this).closest('.list-group-item').addClass('active')
    });
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">WordPress Theme Pro</h4>
        <p class="list-group-item-text">$ 15.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Premium</h4>
        <p class="list-group-item-text">$ 25.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Agency</h4>
        <p class="list-group-item-text">$ 35.00</p>
    </a>
</div>

Upvotes: 2

Prateek Verma
Prateek Verma

Reputation: 889

Please try this code:

Replace your existing code with this one:

<div class="list-group">
    <a href="#" class="list-group-item active">
        <h4 class="list-group-item-heading">WordPress Theme Pro</h4>
        <p class="list-group-item-text">$ 15.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Premium</h4>
        <p class="list-group-item-text">$ 25.00</p>
    </a>
</div>
<div class="list-group">
    <a href="#" class="list-group-item">
        <h4 class="list-group-item-heading">WordPress Theme Agency</h4>
        <p class="list-group-item-text">$ 35.00</p>
    </a>
</div> 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
    $('a.list-group-item').click(function(){
      $('a.list-group-item').removeClass('active');
      $(this).addClass('active')
    });
});
</script>

Hope, this may be helpful to you.

Upvotes: -1

Zakaria Acharki
Zakaria Acharki

Reputation: 67505

There no toggle functionality in the Documentation so you could add click event that will toggle the active class like :

$(function(){
  $('body').on('click', '.list-group-item', function(){
    $('.list-group-item').removeClass('active');
    $(this).closest('.list-group-item').addClass('active');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>

<div class="list-group">
  <a href="#" class="list-group-item active">
    <h4 class="list-group-item-heading">WordPress Theme Pro</h4>
    <p class="list-group-item-text">$ 15.00</p>
  </a>
</div>
<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">WordPress Theme Premium</h4>
    <p class="list-group-item-text">$ 25.00</p>
  </a>
</div>
<div class="list-group">
  <a href="#" class="list-group-item">
    <h4 class="list-group-item-heading">WordPress Theme Agency</h4>
    <p class="list-group-item-text">$ 35.00</p>
  </a>
</div>

Upvotes: 3

Related Questions