ड्रॉपडाउन तीर टॉगल करने के लिए कैसे करें

Question

यह वह कोड है जिसका उपयोग मैं स्लाइड टॉगल प्रभाव के साथ div को छिपाने और प्रदर्शित करने के लिए कर रहा हूं।

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

हालांकि मैं कुछ toggled तीर जोड़ना चाहता हूं यह दिखाने के लिए कि toggled 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 प्रत्येक तीर को टॉगल करता है, इसलिए जब कुछ divs ऊपर होते हैं और एक नीचे होता है तो वे सभी नीचे दिखाए जाते हैं।

कोई भी विचार 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"); 
     }); 
}); 

तब का उपयोग करें:

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