toggle icon if div is visible

0
votes

Hi i'm new in jquery and I need advice :-)

I made this function to collapse divs and toggle icons in a grid view. Everything works fine except that the icon of the opened panel does not toggle when I click to open another panel in my grid. (each panel has the same class in my grid)

the function is as follow :

//first I hide the panels

$(".help_content").hide();

// then i make the function to display my panel 

$(".help_target").click(function(e){    
e.preventDefault();
$(this).next('.help_content').slideToggle("slow" );

//then i make my icon toggle 

 $(this).children('.fa-plus,.fa-minus').toggleClass("fa-minus fa-plus");

// finally this line is to close the opened panel when i click on one another 

 $(".help_target").not(this).next(".help_content").slideUp("slow"/*

Now i need to find a way to toggle back the icon to minus when the previous opened panel is closing. I know maybe i do not explain it the right way so the best thing is to give you the url so you can see my problem : my dev page

2
jqueryiconstoggle

2 Answers

0
votes
$(".help_target").not(this).children('.fa').removeClass("fa-plus").addClass("fa-minus");
-1
votes

Simply toogle all .fa-minus before the one cliked: 

$('.fa-minus').toggleClass("fa-minus fa-plus");
$(this).children('.fa-plus,.fa-minus').toggleClass("fa-minus fa-plus");