# Bootstrap toggle buttons 2.8 - by Mattia Larentis

### Basic

#### Html:

    <div id="normal-toggle-button">
        <input type="checkbox" checked="checked">
    </div>

#### Js:

    $('#normal-toggle-button').toggleButtons();

### Callback

Status is: false

#### Html:

    <div id="callback-toggle-button">
        <input type="checkbox">
    </div>

#### Js:

    $('#callback-toggle-button').toggleButtons({
        onChange: function ($el, status, e) {
            console.log($el, status, e);
            $('#magic-text').text("Status is: " + status);
        }
    });

### Text & Size

#### Html:

    <div id="text-toggle-button">
        <input type="checkbox">
    </div>

#### Js:

    $('#text-toggle-button').toggleButtons({
        width: 220,
        label: {
            enabled: "Lorem Ipsum",
            disabled: "Dolor Sit"
        }
    });

### Style

#### Html:

    <div id="danger-toggle-button">
        <input type="checkbox" checked="checked">
    </div>

#### Js:

    $('#danger-toggle-button').toggleButtons({
        style: {
            // Accepted values ["primary", "danger", "info", "success", "warning"] or nothing
            enabled: "danger",
            disabled: "info"
        }
    });

### Not Animated

#### Html:

    <div id="not-animated-toggle-button">
        <input type="checkbox" checked="checked">
    </div>

#### Js:

    $('#not-animated-toggle-button').toggleButtons({
        animated: false
    });

### Transition Speed

#### Html:

    <div id="transition-percent-toggle-button">
        <input type="checkbox" checked="checked">
    </div>

    <div id="transition-value-toggle-button">
        <input type="checkbox">
    </div>

#### Js:

    $('#transition-percent-toggle-button').toggleButtons({
        transitionspeed: "500%"
    });

    $('#transition-value-toggle-button').toggleButtons({
        transitionspeed: 1  // default value: 0.05
    });

### Disabled

#### Html:

    <div id="disabled-toggle-button">
        <input type="checkbox" checked="checked" disabled="">
    </div>

#### Js:

    $('#disabled-toggle-button').toggleButtons();
    $('#disabled-toggle-button').toggleButtons('toggleActivation');  // to toggle the disabled state

### Label

Toggle me!

#### Html:

    <label for="checkbox14">Toggle me!</label>
    <div id="label-toggle-button">
        <input id="checkboxLabel" type="checkbox" checked="checked">
    </div>

#### Js:

    $('#label-toggle-button').toggleButtons();
    $('#label-toggle-button').toggleButtons('toggleState');  // to toggle the activation state

### Class

one
two
three

#### Html:

    <label for="checkboxOne">one</label>
    <div class="toggle-button-class">
        <input id="checkboxOne" type="checkbox" checked="checked">
    </div>

    <label for="checkboxTwo">two</label>
    <div class="toggle-button-class">
        <input id="checkboxTwo" type="checkbox" checked="checked">
    </div>

    <label for="checkboxThree">three</label>
    <div class="toggle-button-class">
        <input id="checkboxThree" type="checkbox" checked="checked" disabled="">
    </div>

#### Js:

    $('.toggle-button-class').toggleButtons();

### Custom Colors

Magenta
Gradient Magenta

#### Html:

    <label for="checkboxMagenta">Magenta</label>
    <div id="magenta-toggle-button">
        <input id="checkboxMagenta" type="checkbox">
    </div>

    <label for="checkboxGradientMagenta">Gradient Magenta</label>
    <div id="gradient-magenta-toggle-button">
        <input id="checkboxGradientMagenta" type="checkbox" checked="checked">
    </div>

#### Js:

    $('#magenta-toggle-button').toggleButtons({
        style: {
            custom: {
                enabled: "#FF00FF",
                enabledColor: "#FFFFFF",
                disabled: "#FFAA00",
                disabledColor: "#333333"
            }
        }
    });

    $('#gradient-magenta-toggle-button').toggleButtons({
        style: {
            custom: {
                enabled: "#FF00FF",
                enabledGradient: "#D300D3",
                enabledColor: "#FFFFFF",
                disabled: "#FFAA00",
                disabledGradient: "#DD9900",
                disabledColor: "#333333"
            }
        }
    });

### Height & Text-style

#### Html:

    <div id="height-text-style-toggle-button">
        <input type="checkbox" checked="checked">
    </div>

#### Js:

    $('#height-text-style-toggle-button').toggleButtons({
        height: 100,
        font: {
            'line-height': '100px',
            'font-size': '20px',
            'font-style': 'italic'
        }
    });

### Data Attributes

#### Html:

    <div id="data-attribute-toggle-button"
         data-toggleButton-width="170"
         data-toggleButton-transitionspeed="500%"
         data-toggleButton-style-custom-enabled-background="#FF0000"
         data-toggleButton-style-custom-enabled-gradient="#000000">
        <input type="checkbox" checked="checked">
    </div>

#### Js:

    $('#data-attribute-toggle-button').toggleButtons();

### Toggle State

ON!
Toggle me!
OFF!

#### Html:

    <div id="toggle-state-toggle-button">
        <input type="checkbox" checked="checked">
    </div>

#### Js:

    $('#toggle-state-toggle-button').toggleButtons();

    $('#toggle-state-toggle-button').toggleButtons('toggleState');  // to toggle the state of the toggle button
    $('#toggle-state-toggle-button').toggleButtons('setState', false); // true || false

### Destroy

#### Html:

    <div id="destroy-toggle-button">
        <input type="checkbox" checked="checked">
    </div>

#### Js:

    $('#destroy-toggle-button').toggleButtons();

    $('#destroy-toggle-button').toggleButtons('destroy');

follow me - my site