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

Elo

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.

Crawler

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

Zaibatsu

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

Aviary

Hi Solanki - This may answer the question, but it would be better if you explained why this solution works with a more complete example. – Canto