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

---

Toggle me!

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

---

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

---

Destroy me!

Html:

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

Js:

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

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