accordian + and - symbol help

Question

<script type='text/javascript'>
$(document).ready(function() {
  $('div.Syb> div').hide();
  $('div.Syb> h4').click(function() {
   var span = $(this).children('span:first').attr('class');

  //    span.text(span.text()=='+'?'-':'+');


     span = (span == 'plus')?'minus':'plus';

   $(this).children('span:first').attr('class',span);

 $(this).next('div').slideToggle('fast')
 .siblings('div:visible').attr('css','plus').slideUp('fast');

//    $(this).siblings('div.Syb>h4 >span:first').attr('css','plus');

  });
});
</script>

when ever the div gets closed in need to put + symbol back...which i am not able to do ..any help on this?

<div class="Syb">
  <h4><span class='plus'></span>Title 1</h4>
  <div>Lorem...</div>
  <h4><span class='plus'></span>Title 2</h4>
  <div>Ipsum...</div>
  <h4><span class='plus'></span>Title 3</h4>
  <div>Dolor...</div>
</div>

is my html

Answer 1

span = (span == 'plus')?'minus':'plus';

   $(this).children('span:first').attr('class',span);

instead of this

this is code for changing class i.e toggling class

if ( $('span:first').hasClass('minus') ) {
    $('span:first').removeClass('minus');
   $('span:first').addClass('plus');
} else {
    $('span:first'').addClass('minus');
    $('span:first').removeClass('plus');
}

Answer 2

You can use .toggleClass(), like this:

$(this).children('span:first').toggleClass('plus minus');

I can't be sure that the selector to find the <span> is right without the HTML though. Since the element has one class or the other, a toggle of both effectively swaps them, short and simple :)