jquery toggle with arrows problem

I am trying to add down arrows image when expanding and right arrow image when its not expanded, which work fine wiht the code below.

THE problem is when u collapse the block again it doesnt remove the down arrow image. when its collapsed i wanted the down arrow replaced by the right arrow image.

thanks

            $('#title h4').removeClass('DownArrow ');
            $('#title h4').addClass('RightAr开发者_开发问答row '); 
            $('#title').click(function() {
              $('#d-form').slideToggle("slow");
              $('#title h4').addClass('DownArrow ');            
            });


<div id="title"> <h4><a href="#">Dental</a></h4></div>
<div id="d-form">
some stuff
</div>

You should just use .toggleClass()^(DOCS):

$('#title h4').removeClass('DownArrow ');
$('#title h4').addClass('RightArrow ');
$('#title').click(function(e) {
    e.preventDefault();
    $('#d-form').slideToggle("slow");

    $('#title h4').toggleClass('RightArrow');
    $('#title h4').toggleClass('DownArrow');
});

I also added preventDefault() to your click event so that the hash isn't loaded into the href.

See example →

Use toggleClass instead

          $('#title h4').toggleClass('DownArrow');
          $('#title h4').toggleClass('RightArrow');

Working jsFiddle