Swapping DIV class, not working

Swapping DIV class, not working

I am trying to build a simple FAQ type of list with a twirl down arrow on each main item. I got the data for each item to hide/unhide but am having trouble getting the arrow to twirl. Any ideas?


My HTML
  2. <div class="comparison-content">
  3.      <div class="item">
  4.           <div class="title">
  5.                <div class="arrow-right"></div>
  6.                <a class="link">First Item on the list.</a>
  7.           </div>
  8.           <ul class="data">
  9.                 <li class="subitem">First information</li>
  10.                 <li class="subitem">More information</li>
  11.           </ul>
  12.      </div>
  13.      <div class="item">
  14.           <div class="title">
  15.                <div class="arrow-right"></div>
  16.                <a class="link">Second Item on the list.</a>
  17.           </div>
  18.           <ul class="data">
  19.                <li class="subitem">Second information</li>
  20.                <li class="subitem">More information</li>
  21.           </ul>
  22.      </div>
  23. ----repeat "item" divs ----
  24. </div>


My jQ initialization
  2. $(document).ready(function() {
  3.   $('div .comparison-content .item > .data').hide();
  4.   $('div .comparison-content .item').click(function() {
  5. $(this).children('.data').toggle();
  6. $(this).children('.title .arrow-right').toggle(
  7. function() {
  8. $(this).addClass('arrow-down').removeClass('arrow-right');
  9. },
  10. function() {
  11. $(this).addClass('arrow-right').removeClass('arrow-down');
  12. });
  13.   });
  14. });


So it first goes through and hides all the "data" DIVs.  Then when you click on the "item" DIV it will show it.  That works.

Second when clicking on the "item" DIV it should step down inside the "title" DIV and replace the DIV class for "arrow-right" with "arrow-down". If clicked again it should reverse it.

That doesn't work.