javascript - Change icons when toggle -


i've code

jquery(function($) {      //after toggle content 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 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 works, when click on link, icons change.

i want when click on first link example, icon change. same thing when click on second link, icon change.

thanks !

grab current element $(this) , navigate parent closest()

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

jquery(function ($) {      			//after toggle content 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 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>


Comments

Popular posts from this blog

How to connect android app to App engine -

gcc - MinGW's ld cannot perform PE operations on non PE output file -

php - display validation error message next to the textbox in codeigniter -