如何切換下拉箭頭

Question

這是我用來隱藏和顯示幻燈片切換效果的div的代碼。

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

但是我想添加一些切換的箭頭來顯示切換的div是向上還是向下。

這是我有這麼遠，它的什麼，我想它的一半做：

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

這將觸發箭頭，但有兩個問題：

1. 向下箭頭顯示停留
2. 每個div都會切換每個箭頭，因此當某個div啓動並且一個div被關閉時，它們全都顯示爲down。

任何想法，將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

使用類！

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

然後使用CSS：

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