This is what I am looking for:

How to keep button active after press with jQuery

I want four buttons and at only one time one button is active.

For example if button one is pressed the others are not shown active and vice versa for the other buttons.

This is what I am looking for:

How to keep button active after press with jQuery

I want four buttons and at only one time one button is active.

For example if button one is pressed the others are not shown active and vice versa for the other buttons.

• javascript
• html
• css

• Thanks All, problem solved all answers very helpful thanks. – rob Commented Dec 3, 2014 at 12:21

4 Answers 4

In case you are looking for a pure JavaScript solution (i.e. no extra dependencies with jQuery, Bootstrap, etc), you can do it like this.

First, group your HTML buttons in a mon parent so you can iterate over them, for example:

<div id="buttonGroup">
  <button>1</button>
  <button>2</button>
  <button>3</button>
  <button>4</button>
</div>

Then, in JavaScript, you can "initialize" the div by setting handlers for the click events of the buttons:

function initButtonGroup(parentId) {
    var buttonGroup = document.getElementById(parentId),
        i = 0,
        len = buttonGroup.childNodes.length,
        button;
        handleButtonGroupClick = initClickHandler(parentId);

    for (; i < len; i += 1) {
        button = buttonGroup.childNodes[i];
        if (button.nodeName === 'BUTTON') {
            button.addEventListener('click', handleButtonGroupClick);
        }
    }
}

Then you need to write the behavior you want in the handler of click events, in this example I'm just changing the classes to get a visual feedback of which one is active:

function initClickHandler(parentId) {
    return function(e) {
        var buttonGroup = document.getElementById(parentId),
            i = 0,
            len = buttonGroup.childNodes.length,
            button;

        e.preventDefault();

        for (; i < len; i += 1) {
            button = buttonGroup.childNodes[i];
            if (button.nodeName === 'BUTTON') {
                button.className = '';
            }
        }

        e.target.className = 'active';
    };
}

Then, you can call your initializer function to initialize your "ponent":

initButtonGroup('buttonGroup');

I've setup a JSFiddle for this example, take a look: http://jsfiddle/et75ftca/

If performance is really important to you, this code may be optimized by using a single click event handler in the entire div element and filtering events that are not targetted at a button.

Assuming you have the code in your link:

 $('.uiButton').click(function() {
   $(this).toggleClass("active");
 });

It would be as easy as writing:

 $('.uiButton').click(function() {
   $('.uiButton').removeClass("active");
   $(this).addClass("active");
 });

Hope this helps you:

HTML

<button id='1' class="btn">1</button>
<button id='2' class="btn">2</button>
<button id='3' class="btn">3</button>
<button id='4' class="btn">4</button>

CSS

.actv {
    background: red;
}

JS

$(".btn").click(function() {
  $(document).find(".btn").removeClass("actv");
  $(this).addClass("actv");
});

JSFiddle

http://jsfiddle/kdghcec9/

HTML:

<button class="btn">One</button>
<button class="btn">Two</button>
<button class="btn">Three</button>

CSS:

.btn {
    border: 0;
    outline: 0;
    display: inline-block;
    background-color: #ddd;
    border-radius: 3px;
    padding: 10px 12px;
}

.btn.active {
    background-color: #000;
    color: #fff;
}

JS (jQuery):

$(function() {
    $('.btn').on('click', function(e) {
        $('.btn.active').removeClass('active');
        $(this).addClass('active');
        e.preventDefault();
    });
});