Liz Liz - 4 months ago 10
jQuery Question

slideToggle with pseudo arrow

I am working with a script that open and closes a div, but what I am trying to work out is how to add (and toggle) the fontawesome open/close arrow icons to the .reveal class. I like the idea of using the pseudo element, but my limited knowledge of javascript is proving difficult.

Can anyone offer any guidance?

$(document).ready(function() {
$('.reveal').click(function() {
$(this).prev('div').slideToggle();
});

$('.unreveal').click(function() {
$(this).parent().slideUp();
});
});



<div class="slidingDiv">
<p>content goes here</p>
</div>
<a class="reveal" href="#">Open / Close</a>

Answer

You can use toggleClass:

 $(document).ready(function() {
     $('.reveal').click(function() {
       $(this).prev('div').slideToggle();
       $(".reveal i").toggleClass("fa-arrow-up fa-arrow-down");
  });


});

Fiddle http://jsfiddle.net/t6cfwLcq/1/ of course you can choose whatever fonts icons you want