CODEWITHSUNDEEP
javascriptjqueryhtml
Code lover
Code lover

Reputation: 93

not able to switch icon in jquery

I am trying to toggle content with icon,icon is changing when i click for plus sign but it is not changing for minus again.basically i want to add plus sign for all the panel which are not open. here is js:

$(".toggle").click(function(e) {		 
  $( this ).find('span').toggleClass( "accordion_icon_close accordion_icon_open" );	    
   var $next=$(this).next().toggle(400);			
   $('.answer').not($next).hide();	
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="toggle " profile='1' id="plus">Toggle <span class="accordion_icon_open"></span></div>
<div class="answer" rel='profile_1'>Answer</div>

<div class="toggle" profile='2'>Toggle <span class="accordion_icon_open"></span></div>
<div class="answer" rel='profile_2'>Answer</div>

Upvotes: 2

Views: 59

Answers (1)

SilentCoder
SilentCoder

Reputation: 2000

Check the answer, I use fa icons, since I don't have your icon set. and just add the class you want to replace inside toggleClass()

$(document).ready(function() {
  $(".toggle").click(function(e) {
    $(this).find('i').toggleClass("fa-minus");
    var next = $(this).next().toggle(400);
     $('.answer').not(next).hide(400);
     $('.toggle').not(this).find('i').removeClass('fa-minus').addClass("fa-plus");
  });
});
.answer {
  display: none
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<div class="container">
 <div class="toggle " profile='1' id="plus">Toggle <i class="fa fa-plus"></i>  </div>
 <div class="answer" rel='profile_1'>Answer</div>
<div>
<div class="container">
<div class="toggle" profile='2'>Toggle <i class="fa fa-plus"></i></div>
<div class="answer" rel='profile_2'>Answer</div>
<div>

Upvotes: 1

Related Questions