Aşağı açılır oklar nasıl açılır

Question

Bu, bir slayt geçişi etkisiyle div'ları gizlemek ve görüntülemek için kullanıyorum koddur.

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

Ancak ben toggled div yukarı veya aşağı olduğunu göstermek için bazı konum değiştirir okları eklemek istiyorum.

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

Bu oka değiştirir ama iki sorun vardır:

1. aşağı ok

   Bu

   i şimdiye kadar var ve ben bunu istiyorum yarısı ne yapmak ne yaptığıdır
2. Gösterilenler, her div, bazı divlar dolduğunda ve biri kapalı olduğunda aşağı doğru gösterdiği her ok arasında geçiş yapar.

Herhangi bir fikir

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

Kullanım sınıfları appriciated!

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

Ardından kullanmak CSS:

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