JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.3.0/bootstrap.min.css">
<h4>Groups</h4>
<div class="well">
    <div class="btngroup">
        <a class="btn" href="#">Left</a>
        <a class="btn" href="#">Right</a>
    </div>
    <div class="btngroup">
        <a class="btn" href="#">1</a>
        <a class="btn" href="#">2</a>
        <a class="btn" href="#">3</a>
        <a class="btn" href="#">4</a>
    </div>
</div>
<h4>Radios</h4>
<p>In a radio group, only one button may be active at a time. Add the class <code>.radio-group</code> to the button group.</p>
<div class="well">
    <div class="radio-group btngroup">
        <label class="btn active"><input type="radio" name="radio1" checked="checked" />Left</label>
        <label class="btn"><input type="radio" name="radio1" />Middle</label>
        <label class="btn"><input type="radio" name="radio1" />Right</label>
    </div>
</div>
<h4>Toggles</h4>
<p>Toggles work like radios, but each button in the group can be set independently. Add <code>.toggle</code> to each button in the button group. Lone buttons can also be toggles.</p>
<div class="well">
    <div class="toggle-group btngroup">
        <label class="btn toggle active"><input type="checkbox" name="toggle1" checked="checked" />Left</label>
        <label class="btn toggle"><input type="checkbox" name="toggle2">Middle</label>
        <label class="btn toggle"><input type="checkbox" name="toggle3">Right</label>
    </div>
    
    <label class="btn toggle"><input type="checkbox" name="toggle4">Toggle</label>
</div>

CSS

.toggle.active {
  background-color: #bfbfbf;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#bfbfbf), to(#bfbfbf));
  background-image: -moz-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: -ms-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #bfbfbf), color-stop(100%, #bfbfbf));
  background-image: -webkit-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: -o-linear-gradient(top, #bfbfbf, #bfbfbf);
  background-image: linear-gradient(top, #bfbfbf, #bfbfbf);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bfbfbf', endColorstr='#bfbfbf', GradientType=0);
  color: #333;
  text-decoration: none;
  -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.05);
}

.radio-group label.active {
  color: #ffffff;
  background-color: #0064cd;
  background-repeat: repeat-x;
  background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
  background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
  background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
  background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
  background-image: -o-linear-gradient(top, #049cdb, #0064cd);
  background-image: linear-gradient(top, #049cdb, #0064cd);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#049cdb', endColorstr='#0064cd', GradientType=0);
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
  border-color: #0064cd #0064cd #003f81;
  border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
}

.radio-group...

JavaScript

/* Radio and toggle buttons */
              
!function( $ ) {

    function activate( element, container ) {
        container.find( '.active' ).removeClass( 'active' )
        element.addClass('active')
    }

    jQuery.fn.radioGroup = function() {
        
        return this.each( function() {
            var $this = $(this)
            $this.click( function() {
                activate( $this, $this.parent() )
            })
        })
    }
    
    jQuery.fn.toggleBtn = function() {
        return this.each( function() {
            var $this = $(this)
            $this.click( function(ev) {
                var target = ev.originalEvent.target;
                
                // because the event bubble and is also triggered by the LABEL element
                if (target.tagName != "INPUT") return;
                
                $this.toggleClass('active')
            })
        })
    }
    
}( window.jQuery || window.ender );

$('.radio-group > label').radioGroup();
$('.btn.toggle').toggleBtn();