Bootstrap 3 button group: corner radius disappears after a button is hidden

Question

I have the following Bootstrap 3 button group:

<div class="btn-group">
  <button type="button" class="btn btn-default">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

I hide the first button using:

$("button:eq(0)").hide();

The result is that the first visible button doesn't have corner radius:

I guess the BS says: first child of .btn-group has border-radius instead of first visible child of .btn-group has border-radius

Is there any way to fix this?

JSFIDDLE

Note that I don't want to remove the button but to hide it.

Answer 1

Given that you are already using jQuery, you could use the following to add a class to the first/last visible button elements.

$(".btn-group button:visible")
    .first()
    .addClass('radius-left')
    .end()
    .last()
    .addClass('radius-right');

EXAMPLE HERE

You would then need to add the following styling:

.btn-group > .btn.btn-default.radius-left {
    border-top-left-radius: 4px!important;
    border-bottom-left-radius: 4px!important;
}
.btn-group > .btn.btn-default.radius-right {
    border-top-right-radius: 4px!important;
    border-bottom-right-radius: 4px!important;
}

Unfortunately, !important is necessary to overwrite the default Bootstrap styling.

---

As an alternative, you could remove the first button element completely and then add it back in when necessary.. $("button:eq(0)").remove(); -- (example)

Answer 2

AngularJS solution

For pure jQuery projects, Josh Croziers answer is correct.

But if you happen to be using AngularJS, there is a much simpler solution:

Add an ng-if="expression" to the button. When expression is true, the button will be shown, otherwise it will be removed from the DOM completely. This makes the "new" first button have rounded corners, because the :first-child selector that Bootstrap uses now selects that one.