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

Answer 3

just impersonate the button being click on page load:

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

Worked for me for another similar standard button i wanted to show as having been clicked on page load - the button action was required to set the page default table view i wanted to display. Other buttons provide different views but the default one showed all data.

Answer 4

I encountered the same problem but wanted a simpler solution. I've noticed that appending "active" to class doesn't solve the problem, as it is removed somehow (I haven't researched why it does this).

The solution is appending "active active" to class. This way, only one is removed and the other bypasses the magic that's happening behind. It's a really dirty solution, but it solves the problem. Hope it helps!