How to toggle dropdown arrows

Question

This is the code i am using to hide and display div's with a slide toggle 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 some toggled arrows to show that the toggled div is up or down.

This is what i have so far and it does half of what i would like it 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 toggles the arrow but there are two problems:

1. The down arrow stays shown
2. Every div toggles every arrow so when some divs are up and one is down they all show as down.

Any ideas would be appriciated

Answer 1

• Use :before pseudo for decorative arrow icons
• Use jQuery's .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>

P.S: If you're using some different font-icons (like i.e: icomoon) than add the respective hex codes and also font-family: 'icomoon'; to the :before pseudo.