How can I pre-toggle a button in Bootstrap's btn-group?

Question

How can I deploy the Radio Button group and make one of the buttons pre-toggled?

I have a radio-buttons group with days of the weeks values. This one:

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

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

And I'm trying to toggle it with the next code (just in testing purposes):

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

This is not working.

Answer 1

You can take advantage of the bootstraps .btn.active class and just add it to the button you wish toggled first and you can use jQuerys toggleClass to untoggle the buttons. Demo.

---

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

---

After looking at what you actually wanted from the comment i updated my fiddle with the results you're looking for.

I added a function that pulls the current day using javascripts getDay method from an array and toggles the corresponding day on the button group by targetting the id of the button: 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 the above but wanted a HTML/CSS solution only.

I found a focus based 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 is easier for fiddles with Bootstrap.
Here is my test bootply: http://www.bootply.com/cSntVlPZtU