Change icons when toggle

Question

I've this code

 jQuery(function($) { //After it toggle the content with this button $('.content_toggle').hide(); $('.link-toggle').before('<i class="fa fa-caret-right"></i>'); $(".link-toggle").click(function() { $(this).toggleClass('active'); $(this).next(".project .content_toggle").slideToggle("slow"); $('.project').find('i').toggleClass('fa-caret-right fa-caret-down'); }); //Let's the magic applies <3 }); 

 i, h4 { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="project"> <h4 class="link-toggle">Link 1</h4> <div id="" class="content_toggle"> <p>Hello world</p> </div> </div> <div class="project"> <h4 class="link-toggle">Link 2</h4> <div id="" class="content_toggle"> <p>Hello world</p> </div> </div> 

It almost works, but when I click on a link, all the icons change.

I want that when I click on the first link for example, only its icon change. The same thing when I click on the second link, only its icon change.

Thanks for you help !

Answer 1

Grab the current element with $(this) and navigate up to the parent with closest()

$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');

 jQuery(function ($) { //After it toggle the content with this button $('.content_toggle').hide(); $('.link-toggle').before('<i class="fa fa-caret-right"></i>'); $(".link-toggle").click(function () { $(this).toggleClass('active'); $(this).next(".project .content_toggle").slideToggle("slow"); $(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down'); }); //Let's the magic applies <3 }); 

 i, h4 { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="project"> <h4 class="link-toggle">Link 1</h4> <div id="" class="content_toggle"><p>Hello world</p></div> </div> <div class="project"> <h4 class="link-toggle">Link 2</h4> <div id="" class="content_toggle"><p>Hello world</p></div> </div> 

Answer 2

You are toggling the class of all i , You need to toggle the class taking current element in context. So you can use .closest() to navigate to element with project class.

Use

$(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down');

instead of

$('.project').find('i').toggleClass('fa-caret-right fa-caret-down');

 jQuery(function($) { //After it toggle the content with this button $('.content_toggle').hide(); $('.link-toggle').before('<i class="fa fa-caret-right"></i>'); $(".link-toggle").click(function() { $(this).toggleClass('active'); $(this).next(".project .content_toggle").slideToggle("slow"); $(this).closest('.project').find('i').toggleClass('fa-caret-right fa-caret-down'); }); }); 

 i, h4 { display: inline-block; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="project"> <h4 class="link-toggle">Link 1</h4> <div id="" class="content_toggle"> <p>Hello world</p> </div> </div> <div class="project"> <h4 class="link-toggle">Link 2</h4> <div id="" class="content_toggle"> <p>Hello world</p> </div> </div>