CSS3 ON/OFF Switch

by lovromar

HTML

<div id = 'settings'>
  <p>
    Links: 
    <span class = 'onoff on'>ON</span>
    <span class = 'onoff'>OFF</span>
    </p><br />
  <p>
    Chapters: 
    <span class = 'onoff on'>ON</span>
    <span class = 'onoff'>OFF</span>
  </p>
</div>

CSS

/* 
    Created by @JohnieHjelm. I took the liberty of doing this ON/OFF switch
    just to express my love for CSS3. You're free to use this and of course
    I hoped you learned something. Sharing is Caring♥
*/

#settings span
    {
    padding:2px 10px 0; 
    }

#settings span
    {
    text-decoration: none;
    color:#AAA;
    cursor: pointer;  
    }

#settings .on
   {
    background: #555;
    color:#7BBA47;
    cursor: default;
    }

JavaScript

$(function(){
        $('#settings .onoff').click(function(){
            $(this).siblings().removeClass("on");
            $(this).addClass("on"); 
        });
    });