How can I pre-switch a button in Bootstrap btn-group?

Question

How can I expand the Radio Button group and make one of the buttons previously switched?

I have a group of buttons with days of the week. It:

<div class="btn-group" data-toggle="buttons-radio"> <button class="btn" id="test0">Mon</button> <button class="btn" id="test1">Tue</button> <button class="btn" id="test2">Wed</button> <button class="btn" id="test3">Thu</button> <button class="btn" id="test4">Fri</button> <button class="btn" id="test5">Sat</button> <button class="btn" id="test6">Sun</button> </div> 

I need to get the current value of the day (using var currentDay = new Date().getDay() ) and toggle (activate) the corresponding button in the group.

And I'm trying to switch it with the following code (for testing purposes only):

 $("#test0").button('toggle') 

This does not work.

Answer 1

You can use the bootstraps .btn.active class and just add it to the button you want to port, and you can use jQuerys toggleClass to untie the buttons. Demo

---

Just noticed that twitter has a script button that you can call for this effect, here is a fixed demo with the expected results.

---

After looking at what you really wanted from the comment, I updated my fiddle with the results you are looking for.

I added a function that pulls the current day using the javascripts getDay method from the array and switches the corresponding day in the button group by setting the button identifier: demo

Relevant Code:

Js

 function today() { var arr = ["0", "1", "2", "3", "4", "5", "6"]; //first day of the week is sunday and its index is 0 var currentDay = new Date().getDay(); return (arr[currentDay]); } var day = '[id="test' + today() +'"]'; // we take the current day from the array and add the beginning of the class name and save it in a variable $(day).button('toggle'); 

Answer 2

I tried this, but only wanted an HTML / CSS solution.

I found that the focus approach would work for Bootstrap 3. Note that autofocus is an HTML5 attribute .

 <div class="btn-group"> <button class="btn" id="test0" autofocus="true">Mon</button> <button class="btn" id="test1">Tue</button> <button class="btn" id="test2">Wed</button> <button class="btn" id="test3">Thu</button> <button class="btn" id="test4">Fri</button> <button class="btn" id="test5">Sat</button> <button class="btn" id="test6">Sun</button> </div> 

I find Bootply easier for scripts with Bootstrap.
Here is my bootply test: http://www.bootply.com/cSntVlPZtU

Answer 3

I ran into the same problem, but wanted a simpler solution. I noticed that adding “active” to the class does not solve the problem, since it is somehow removed (I have not investigated why it does this).

The solution adds "active active" to the class. Thus, only one is removed, and the other bypasses the magic that occurs behind. This is a really dirty solution, but it solves the problem. Hope this helps!

Answer 4

just impersonate a button click on a page load:

$ ("# buttonid") trigger ("click").

It worked for me on another similar standard button, which I wanted to show because I clicked on the page load - the button action was necessary to set the default table display that I wanted to display. Other buttons provide different views, but all data is displayed by default.