JQuery slideToggle - изменение текста

Question

Я хотел бы изменить часть своего текста всякий раз, когда активируется функция slideToggle.

Так, например, у меня есть текст, который при нажатии отображается некоторая информация. Угол, который показан рядом с текстом, должен затем измениться от угла вниз до угла вверх.

Я пробовал его со следующим кодом, но он просто остается вниз, когда он снова активируется.

JQuery:

$(".header").click(function() { 

    $header = $(this); 
    //getting the next element 
    $content = $header.next(); 
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
    $content.slideToggle(500, function() { 
     //execute this after slideToggle is done 
     $('.fa-angle-down').remove(); 
     $header.prepend('<i class="fa fa-angle-up"></i>'); 
    }); 

}); 

HTML:

<div class='container'> 
<h2>Title</h2> 
<br> 
<div class='header'><i class="fa fa-angle-down fa-1x"></i> Title text</div> 
<div class="content"> 
Content text 
</div> 
</div> 

CSS:

.container .content { 
    display: none; 
    padding : 5px; 
} 

.header { 
    cursor: pointer; 
} 

Answer 1

Вам нужно переключить класс в слайде полный обратный вызов

$header.find('i').toggleClass('fa-angle-down fa-angle-up'); 

Answer 2

Я думаю, JQuery toggleClass() может удовлетворить ваши требования лучше:

$(".header").click(function() { 
    $header = $(this); 
    //getting the next element 
    $content = $header.next(); 
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown. 
    $content.slideToggle(500, function() { 
     $('.fa').toggleClass("angle-down"); 
    }); 

}); 

Попробуйте example.