Question

I currently have the following script using CSS Sprites that toggles between active and inactive states.
This works great however I would like only the ‘current’ bullet to remain active. So when its clicked it resets the others to the inactive appearance. Thanks in advance for any help.

HTML

<script type="text/javascript">
  $(document).ready(function(){
    $('.bullet').click(function() {
      $(this).toggleClass('bullet').toggleClass('active');
    });   
  });
</script>   

---

<a class="bullet" href="#"></a>

---

CSS

a.bullet {
  display:block;
  margin: 0 0 0 5px;
  float: right;
  width:10px;
  height:10px;
  text-indent:-9999px;
  background:url(../images/bullets.jpg) 0 0 no-repeat;
}

a.bullet:hover {
  display:block;
  margin: 0 0 0 5px;
  float: right;
  width:10px;
  height:10px;
  text-indent:-9999px;
  background:url(../images/bullets.jpg) 0 -10px no-repeat;
}

a.bullet:active, a.active { 
  display:block;
  margin: 0 0 0 5px;
  float: right;
  width:10px;
  height:10px;
  text-indent:-9999px;
  background:url(../images/bullets.jpg) 0 -20px no-repeat;
}

Answer 1

Here’s a quick way to achieve what you want…

$(".bullet").live("click", function() {
    $(".bullet").removeClass("active");
    $(this).addClass("active");
});