CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3471546
user3471546

Reputation: 381

How to change arrow icon button on click with jquery

I have button icon thisthis.. at click event i want to change it as it this.. right now i am applying this code for jquery

<script>
   $('div[id^="module-tab-"]').click(function(){
        $(this).next('.hi').slideToggle();
   });
</sript>

what should change to change left cursor arrow to right cursor arrow in jquery? please help me with code

Upvotes: 1

Views: 10466

Answers (3)

user3471546
user3471546

Reputation: 381

hey @Jeetendra Chauhan thanx but still not get what i want.. here is anther code of html..

<div id="tab-module-row" style="display:none;">
    div class="module-row module-tab module-details pull-right">
      <b>Details:</b>
                                    <span class="grey-line"></span>                                                                             
          <div id="module-tab-details" class="hello-sugg">

                                        <img src="images/icons/icon-orangeboxarrow-right.png" class="right"> Some error is here                                <span class="pull-right">
                                            <img src="images/icons/icon-chat.png" data-toggle="modal" data-target="#commentBox">&nbsp;&nbsp;
                                             <img src="images/icons/icon-alert.png">                                                 </span>
                                    </div>

                        <div class="hi" id="hi1" style="width: 95%;display:none;">
                                         <span class="grey-line"></span>    
                                <b>Suggested steps:</b><br>

                                <ol>
                                    <li>Step one to resolve the issue. Try this one first!</li>
                                    <li>Second Step to resolve the issue. Try this one first!</li>
                                </ol><br>
                                <img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#commentBox">Add Comments</a><br>
                                <img src="images/icons/icon-charcoalarrow.png"> <a href="" data-toggle="modal" data-target="#fetchData">Update / Test Data</a><br>&nbsp;<br>
                            </div>    
                                    <span class="grey-line"></span>   </div>
                            </div>

Upvotes: 0

Jeetendra Chauhan
Jeetendra Chauhan

Reputation: 1977

here is working demo of your problem

i create a active class which change background-image. toggling active class fullfill your requirement

here is your css

.tab {
  background: url('https://i.sstatic.net/dzs9m.png') no-repeat;
  padding-left:50px;
}

.tab.active {
    background: url('https://i.sstatic.net/euD9p.png') no-repeat;
 }

.hi {
  display:none
}

and here is your JS

(function(){

  $('div[id^="module-tab-"]').click(function(){
      $(this).toggleClass("active").next('.hi').slideToggle();
  });

}());

Upvotes: 0

Adil
Adil

Reputation: 148110

You can use toggleClass to swtich between two images. Assign each image to a class and switching between classes using toggleClass will change the image on click.

Live Demo

$('div[id^="module-tab-"]').click(function(){
     $(this).next('.hi').toggleClass("left-image right-image");
});

Upvotes: 1

Related Questions