CODEWITHSUNDEEP
jquerybuttontwitter-bootstrap-3
FrankDraws
FrankDraws

Reputation: 385

Bootstrap: Reset Button Link Active State Back To Normal

Here's the fiddle.

I have the behavior almost doing what it needs to do.

Hover works great, button stays active when clicked, and when I click on another button the previous button becomes inactive.

My issue is when I click on the active button again, it doesn't reset back to inactive (i.e. back to normal). I've tried a number of ways to get the behavior I need but I can't get it to work right.

I've tried $().button(), .toggle(), going over the documentation, and a few others I can't remember.

HTML

<a class="btn btn-success btn-md">Link One</a>
<a class="btn btn-success btn-md">Link Two</a>
<a class="btn btn-success btn-md">Link Three</a>
<a class="btn btn-success btn-md">Link Four</a>

CSS

.btn-active,
.btn-success:hover {
    background-color: #003c1e;
    color: #fff !important;
    /* Gradient */
    background: #00356B; /* Old browsers */
    background: -webkit-gradient(linear, 0 0, 0 100%, from(#006b34), to(#003c1e)) !important;
    background: -webkit-linear-gradient(#006b34 0%, #003c1e 100%) !important;
    background: -moz-linear-gradient(#006b34 0%, #003c1e 100%) !important;
    background: -o-linear-gradient(#006b34 0%, #003c1e 100%) !important;
    background: linear-gradient(#006b34 0%, #003c1e 100%) !important; /* FF3.6+ */ /* Chrome,Safari4+ */ /* Chrome10+,Safari5.1+ */ /* Opera 11.10+ */ /* IE10+ */ /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#006b34', endColorstr='#003c1e',GradientType=0 ) !important; /* IE6-9 */

}

JS

$(".btn-success").click(function(){
    $(this).addClass("btn-active").siblings().removeClass("btn-active");
});

fff

Upvotes: 2

Views: 3339

Answers (1)

Jordan Burnett
Jordan Burnett

Reputation: 1844

You were nearly there, try using toggleClass() instead of toggle().

Toggle is used to control the visibility of an element whereas toggleClass will toggle a CSS class name on and off for you.

$(".btn-success").click(function(){
    $(this).toggleClass("btn-active").siblings().removeClass("btn-active");
});

Upvotes: 1

Related Questions