Question

I have a bunch of div’s:

<div class='option'>
    <span>here is a label for one pair of radio buttons</span>
    <a href='#' rel='radio' class='on'>On</a>
    <a href='#' rel='radio' class='off'>Off</a>
</div>

I’m trying to toggle between these two classes (‘off’ and ‘on’) using jQuery.

<script>; 
$(document).ready(function(){ 
   $("a[rel='radio']").click(function(){
      if($(this).attr('class')=='on'){
        //make $(this) have class 'off'
        //make the other a in *this* div have class 'on'

      } else {
        //make $(this) have class 'on'
        //make the other a in the div have class 'off'
      }

  });
});
</script>

How can I turn the commented psuedo-code into real-world jQuery?

Answer 1

Try this;

$("a[rel='radio']").click(function(){
   $(this).siblings('a').andSelf().toggleClass('on off')
});