How to switch dropdown arrows

Question

This is the code I use to hide and show a div with a slide switch effect.

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

However, I would like to add a few switched arrows to show that the div is overloaded up or down.

This is what I still have, and it does half what I would like to do:

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

This switches the arrow, but there are two problems:

• Down arrow shown
• Each div toggles each arrow, so when some divs are up and one is down, they all appear as down.

Any ideas would be appriciated

Answer 1

• Usage :before pseudo for decorative arrows
• Use jQuery .toggleClass()

 jQuery(function($) { // DOM ready and $ alias in scope /** * Option dropdowns. Slide toggle */ $(".option-heading").on('click', function() { $(this).toggleClass('is-active').next(".option-content").stop().slideToggle(500); }); }); 

 .option-heading:before { content: "\25bc"; } .option-heading.is-active:before { content: "\25b2"; } /* Helpers */ .is-hidden { display: none; } 

 <div class="option-heading">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.3.1.js"></script> 

PS: if you use several other font icons (for example, icomoon), then add the corresponding hexadecimal codes, as well as font-family: 'icomoon'; before :before pseudo.

Answer 2

Use classes!

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

Then use CSS:

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

Answer 3

  $('.nav-arrow').on('click', function () { $(this).parents('.col-md-6').siblings().find('li').removeClass('subnav---open').find('ul').slideUp('fast'); $(this).parent().toggleClass('subnav---open').find('ul').first().slideToggle('fast'); });