Toggle Button

by cs3vigny

HTML

<script src="http://simontabor.com/js/lib/toggles-min.js"></script>
<link rel="stylesheet" href="http://simontabor.com/css/toggles.css">
<div class="toggle-modern">
    <div class="toggle off"></div>
</div>
<div class="offState" id="offState">
    <div class="offStateText">
        	<h3 class="onOffHeaderText">Without NextGen</h3>

        <div class="onOffText">At some airports without NextGen technology, planes are permitted to push back at any time and move into position, or 'taxi' to the runway, lining up on a first-come, first-served basis. And so a busy travel day can lead to congestion and long wait times on the tarmac.</div>
    </div>
    <img src="media/imageOff.png" alt="Airport runway cluttered with disorganized airplanes." width="400px" height="360px" />
</div>
<div class="onState hidden" id="onState">
    <div class="onStateText">
        	<h3 class="onOffHeaderText">Queue It Up</h3>

        <div class="onOffText">
            <p>The problem was allowing planes to push back after the pilots requested to do so. This lead to traffic jams on the tarmac that increased delays.</p>
            <p>Now, with flight information flowing back and forth seamlessly, air traffic controllers can orchestrate a perfect symphony of the hundreds of departures major airports host every day.</p>
            <p>It is only one step in a number of procedures designed to enhance safety, minimize environmental impace, and build more predicatability into the entire structure of the airspace.</p>
        </div>
    </div>
    <img src="media/imageOn.png" alt="Airport runway showing organized airplanes taking off." width="400px" height="360px" />
</div>

JavaScript

$(document).ready(function () {

    //On-Off Button
    $('#offState').show();
    $('#onState').hide();

    $('.toggle').toggles({
        click: true,
        drag: true,
        on: false,
        width: 100,
        height: 30,
        type: 'compact'
    });

    $('.toggle').on('toggle', function (e, active) {
        if (active) {
            $('#offState').hide();
            $('#onState').show();
        } else {
            $('#offState').show();
            $('#onState').hide();
        }
    });

});