karma February 2016

Dynamic button groups in Bootstrap

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:

enter image description here

When button 2 is active:

enter image description here

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="b        

Answers


zero point February 2016

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;
   bo 


Mohammed Raja February 2016

$("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

Post Status

Asked in February 2016
Viewed 3,841 times
Voted 11
Answered 2 times

Search




Leave an answer