Dynamic button groups in Bootstrap

Question

I wonder if there is a way to make button group dynamic, example: http://www.bootply.com/lkJQ2WDubH in result you can see first line and second line.

How would I create or make it dynamic so that when I click on button it adjust position and gets active state?

When button 1 is active:

When button 2 is active:

and so on...

So one button group or toolbar that acts like those 2 groups, right now it is duplicate code.

Idea is that active button stands out, but right now it is duplicate code and perhaps there is more dynamic solution, appreciate guidance or help.

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary active">1</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">
    <button type="button" class="btn btn-primary">2</button>
    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
</div>
<br>
<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
  <div class="btn-group" role="group" aria-label="First group">
    <button type="button" class="btn btn-primary">1</button>
  </div>
  <div class="btn-group" role="group" aria-label="First groups">
     <button type="button" class="btn btn-primary active">2</button>
  </div>
  <div class="btn-group" role="group" aria-label="Second group">

    <button type="button" class="btn btn-primary">3</button>
    <button type="button" class="btn btn-primary">4</button>
    <button type="button" class="btn btn-primary">5</button>
    <button type="button" class="btn btn-primary">6</button>
    <button type="button" class="btn btn-primary">7</button>
  </div>
</div>

Thank you.

Answer 1

Do something like this:

<div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups">
   <div class="btn-group" role="group" aria-label="First group">
      <button type="button" class="btn btn-primary new">1</button>
      <button type="button" class="btn btn-primary new">2</button>
      <button type="button" class="btn btn-primary new">3</button>
      <button type="button" class="btn btn-primary new">4</button>
      <button type="button" class="btn btn-primary new">5</button>
      <button type="button" class="btn btn-primary new">6</button>
      <button type="button" class="btn btn-primary new">7</button>
  </div>
</div>

Then, with a little bit of jquery, you can add a class to the clicked button and remove it from others to achieve any style you want on clicked button:

  $("button.new").click(function() {
      $("button.new").removeClass("buttonChange").removeClass("buttonRoundLeft").removeClass("buttonRoundRight");
     $(this).addClass("buttonChange");
     $(this).prev().addClass("buttonRoundLeft");
     $(this).next().addClass("buttonRoundRight");
 });

The required CSS classes look like this:

.buttonChange  {
    margin: 0 10px !important;
    border-radius: 5px !important;
 }

 .buttonRoundLeft {
    border-top-right-radius: 5px !important;
    border-bottom-right-radius: 5px !important;
 }
 .buttonRoundRight {
    border-top-left-radius: 5px !important;
    border-bottom-left-radius: 5px !important;
 }

Check out a working example on CODEPEN

UPDATE:

Easier way to do it is to just have a class for the focus state of the button like this:

button.new:focus {
   margin: 0 10px !important;
   border-radius: 5px !important;
}

This only works if you do not want to have rounded corner for adjacent buttons. It is easy to do it for the next button using the same syntax but not possible for the previous button.

Answer 2

 $("li.btn").click(function() { $("li.btn").removeClass("buttonSelect"); $(this).addClass("buttonSelect"); }); 

 .buttonSelect { margin: 0 10px !important; } li.btn:focus { margin: 0 10px !important; border-radius: 0 !important; } 

 <div class="btn-toolbar" role="toolbar" aria-label="Toolbar with button groups"> <ul class="btn-group" role="group" aria-label="First group"> <li type="button" class="btn btn-primary">1</li> <li type="button" class="btn btn-primary">2</li> <li type="button" class="btn btn-primary">3</li> <li type="button" class="btn btn-primary">4</li> <li type="button" class="btn btn-primary">5</li> <li type="button" class="btn btn-primary">6</li> <li type="button" class="btn btn-primary">7</li> </ul> </div> 

Check this