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
Post a Comment