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:
Any ideas would be appriciated
:before
pseudo for decorative arrow icons.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.