Jak przełączać strzałki rozwijane

Question

To jest kod, którego używam do ukrywania i wyświetlania elementów div z efektem przełączania slajdów.

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

Jednak chciałbym dodać kilka przełączanych strzałek, aby pokazać, że włączony div jest w górę lub w dół.

To, co mam do tej pory i to nie połowa tego, co mi się podoba to zrobić:

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(); 
     }); 
}); 

ten przełącza strzałkę ale istnieją dwa problemy:

1. Strzałka w dół pokazywane są
2. Każdy div przełącza każdą strzałkę, więc gdy niektórzy div są w górze, a jeden w dół, wszyscy pokazują, jak w dół.

Wszelkie pomysły będą 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

klas używać!

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"); 
     }); 
}); 

Następnie za pomocą CSS:

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