toggle7

by lovromar

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/dot-luv/jquery-ui.css">
<div class="box-ul box-video right">
    <ul>
       
        <li class="btn">
         
                <span class="dot"></span>
                <p class="left">Prvi<br />

                </p>
        </li>
        <li class="btn">
           
                <span class="dot"></span>
                <p class="left">Drugi</p>

            
            </li>
        <li class="btn">
          
                <span class="dot"></span>
                <p class="left">Trec</p>

            
        </li>
    </ul>
    
</div>

CSS

li, div { padding-left: 10px; }
.dot { display: inline-block;background-color:gray; height: 16px; width: 16px; border: solid 1px #ddd;float:left; }
.clicked { background: red; }

JavaScript

$('.dot').click(function () {
  $('.dot').not(this).removeClass('clicked');    
  $(this).toggleClass('clicked');
});