Split button group in half

Question

I have a btn-group which I'd like to separate while maintaining the same group. Currently, although initially the group displays as expected, once I select the button from the other side ('Exclude'), I can't deselect it - the two halves seem to be behaving as two groups.

JSFiddle

SimonW · Accepted Answer

The issue here is that bootstrap applies the styling to the buttons based on the active class, which is applied to the label via Javascript. So the radio buttons are actually selected and unselected correctly, it's just hidden by the styling.

Here's two ways of working around this:

Using HTML & CSS:

Combine the buttons into a single button-group with an id of custom-group and add the following css.

#custom-group label:first-child {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  margin-right: 10px;
}

#custom-group label:nth-of-type(2) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

Similar to the answer by kabanus, this will make the single button group look like two.

Using Javascript

Leave the HTML as is and add the following javascript:

var labels = document.querySelectorAll('label');

labels.forEach(function(label) {
  label.addEventListener('click',function() {
      labels.forEach(function(l) {
        l.classList.remove('active');
    });
    label.classList.add('active');
  });
})

This will 'manually' remove the active class from all the buttons and just add it to the one you just clicked. Make sure to tweak the selector for the labels so it doesn't affect other code on your page.

Here's a fiddle: https://jsfiddle.net/22et5z3h/4/

Split button group in half

Answers (2)

Related Questions