Cómo alternar entre las flechas desplegables

Question

Este es el código que estoy usando para ocultar y mostrar div con un efecto de alternar deslizante.

jQuery(document).ready(function() { 
    jQuery(".option-content").hide(); 
    jQuery(".option-heading").click(function() 
     { 
      jQuery(this).next(".option-content").slideToggle(500); 
     }); 
    }); 

Sin embargo, me gustaría añadir algunas flechas toggled para demostrar que el div toggled está arriba o abajo.

Esto es lo que tengo hasta ahora y lo hace la mitad de lo que me gustaría que hiciera:

jQuery(document).ready(function() { 
    jQuery(".option-content").hide(); 
    jQuery("#arrow-up").hide(); 
    jQuery(".option-heading").click(function() 
     { 
      jQuery(this).next(".option-content").slideToggle(500); 
      jQuery("#arrow-up").toggle(); 
      jQuery("#arrow-down").toggle(); 
     }); 
}); 

Esto alterna la flecha, pero hay dos problemas:

1. La flecha hacia abajo se muestra mostrado
2. Cada div alterna cada flecha, por lo que cuando algunos divs están arriba y uno está abajo, todos se muestran como inactivos.

Cualquier idea sería appriciated

Answer 1

jQuery(function($) { 
 

 
    $(".option-heading").click(function() { 
 
    $(this).next(".option-content").stop().slideToggle(500); 
 
    $(this).find(".arrow-up, .arrow-down").toggle(); 
 
    }); 
 

 
});

.option-heading{background:#ddd; cursor:pointer;} 
 
.option-content{background:#eee;} 
 

 
/* Notice this class ! */ 
 
.is-hidden{ display: none; }

<div class="option-heading"> 
 
    <span class="arrow-up is-hidden">&#9650;</span> 
 
    <span class="arrow-down">&#9660;</span> 
 
    HEADING 
 
</div> 
 
<div class="option-content is-hidden"> 
 
    content<br>content<br>content<br>content<br>content<br>content<br>content 
 
</div> 
 

 
<script src="//code.jquery.com/jquery-3.1.0.js"></script>

Answer 2

uso Clases!

jQuery(document).ready(function() { 
    jQuery(".option-content").hide().removeClass("shown").addClass("hidden"); 
    jQuery(".option-heading").click(function() 
     { 
      jQuery(this).next(".option-content").slideToggle(500) 
        .removeClass("hidden").addClass("shown"); 
     }); 
}); 

A continuación, utilice CSS:

.option-content.hidden{ background-image:url(hidden.png); } 
.option-content.shown{ background-image:url(shown.png); }