toggle3

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><span class="yes"></span><p>Easy to Use</p></li>
        <li><span class="yes"></span><p>Step by Step<br /><span>details instructions</span></p></li>
        <li><span class="yes"></span><p>Setup time<br /><span>under 30 mins</span></p></li>
        <li class="btn btn-expanded">
            <div class="btn-t">
                <span class="dot left"></span>
                <p class="left">Expanded<br />
                    <span>This is the extend button It has space for slightly more info.</span>
                </p>
                <div class="cl">&nbsp;</div>
            </div>
        </li>
        <li class="btn">
            <div class="btn-t">
                <span class="dot left"></span>
                <p class="left">Green Doggies</p>
                <div class="cl">&nbsp;</div>
            </div>
            </li>
        <li class="btn">
            <div class="btn-t">
                <span class="dot left"></span>
                <p class="left">Email Support</p>
                <div class="cl">&nbsp;</div>
            </div>
        </li>
    </ul>
</div>

CSS

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

JavaScript

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