CODEWITHSUNDEEP
javascriptjquerycss
Corentin Branquet
Corentin Branquet

Reputation: 1576

Change icons when toggle

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 !

Upvotes: 1

Views: 1164

Answers (2)

Satpal
Satpal

Reputation: 133453

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>

Upvotes: 3

AmmarCSE
AmmarCSE

Reputation: 30607

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>

Upvotes: 4

Related Questions