More efficient toggle

More efficient toggle

Hi all, newb questio, I know, but as I'm not very familiar with JQuery yet, can someone tell me if there is a more efficient way of writing the following code?

  1. jQuery(document).ready(function($) {
  2.    
  3.     $('.toggler').click(function(){
  4.       $(this).parent().children().toggle();  //swaps the display:none between the two spans
  5.       $(this).parent().parent().find('.toggled_content').slideToggle();  //swap the display of the main content with slide action

  7.   });
  8.     
  9. });

  1. <div class='toggle_parent'><div class='toggleHolder'><span class='toggler'><h3>
  2. How much does a pool cost?
  3. </h3></span><span class='toggler' style='display:none; color:#66c900!important;'><h3>
  4. How much does a pool cost?
  5. </h3></span></div><div class='toggled_content' style='display:none;'>
  6. Answer
  7. </div></div>
As you can see, the question is repeated for the sake of changing it's colour. Is there a way or property that I can use that would swap the colo attribute only and not have to toggle the display value?

Thanks!

    • Topic Participants

    • jr