Add and remove class active on button with jquery onclick function

Question

I'm actually using this button group structure with bootstrap. Now I need to add class active to each button when I click on it. And remove from it when I click on another button.

This is my HTML structure, is something like that:

<body>
    <div id="header">
        <div class="logo">Prova<span class="sec-logo">toscana</span>15</div>
        <div class="bottoni">
            <div class="btn-group" role="group" aria-label="...">
                <button type="button" class="btn btn-default" id="b1">12345</button>
                <button type="button" class="btn btn-default" id="b2">12345</button>
                <button type="button" class="btn btn-default" id="b3">12345</button>
                <button type="button" class="btn btn-default" id="b4">12345</button>
                <button type="button" class="btn btn-default" id="b5">12345</button>
                <button type="button" class="btn btn-default" id="b6">12345</button>
            </div>
        </div>
    </div>
</body>

Someone who could help me? Thanks.

What have you tried so far? Please provide sample code with details of the problem(s) you're encountering. — Shaggy
– Shaggy, Commented Apr 21, 2015 at 18:17

Marcin · Accepted Answer · 2015-04-21 18:43:07Z

5

if .active class should not be removed from active button after clicking on it please use addClass instead of toggelClass

$("#header .btn-group[role='group'] button").on('click', function(){
    $(this).siblings().removeClass('active')
    $(this).addClass('active');
})

jsfiddle example

it is also good practice to narrow buttons selection, I used #heade id and .btn-group[role='group'] which makes script applied only on buttons inside all button groups iside <div id="header"></div>

and here you have .active class definition:

.btn.active{
    background-color: red;
}

edited Apr 21, 2015 at 18:43

answered Apr 21, 2015 at 18:37

Marcin

8038 silver badges17 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

kosmos · Accepted Answer · 2015-04-21 17:59:23Z

3

You are looking for something like:

$('.btn').on('click', function(){
    $(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
    $(this).toggleClass('active');
});

Check jsFiddle

answered Apr 21, 2015 at 17:59

kosmos

4,2881 gold badge21 silver badges38 bronze badges

1 Comment

kosmos Over a year ago

If the jsFiddle works... (and it works actually), I think it works (you can test in opening the console, at elements tab). Maybe are you looking for another workaround?

Danny van Holten · Accepted Answer · 2015-04-21 18:23:02Z

0

You should use a combination of .each() and .click() here. So it will target every button in stead of only the first

$('#header .btn').each(function(){
    $(this).click(function(){
        $(this).siblings().removeClass('active'); // if you want to remove class from all sibling buttons
        $(this).toggleClass('active');
    });
});

answered Apr 21, 2015 at 18:23

Danny van Holten

9325 silver badges23 bronze badges

Comments

Sai Deepak · Accepted Answer · 2015-04-21 19:11:00Z

0

I hope this will help you because it works perfectly for me

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".btn").each(function(){
       $(this).click(function(){
          $(this).addClass("active");
          $(this).siblings().removeClass("active");
       });
    });
});
</script>

Try this one

answered Apr 21, 2015 at 19:11

Sai Deepak

6784 silver badges16 bronze badges

2 Comments

kosmos Over a year ago

jQuery's class selector refers to all elements with specified class, so you are doing a loop which is no needed

Sai Deepak Over a year ago

In that case we can specify it in a inherited way right but the loop is required bcoz it needs to check whether it is clicking on the current button and for all its siblings the class needs to be removed

Collectives™ on Stack Overflow

Add and remove class active on button with jquery onclick function

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related