Jquery Slide Toggle - How to change image on toggle?

Question

I want to change the image inside class="slide" when its toggled. There are several widgets like this so relevant widget image must be changed.

<div class="widget">
      <h3>Inhaltsverzeichnis</h3>
      <div class="widgetbox">
        <ul>
          <li><a href="#"> Prozessbeschreibung</a></li>
          <li><a href="#">Produkte & Dienstleistung </a></li>
          <li class="active"><a href="#">Beschaffen</a></li>
          <li><a href="#"> Prozess-Steckbrief</a></li>
          <li><a href="#"> Beschreibung</a></li>
          <li><a href="#"> Mitgeltende Dokumente</a></li>
          <li><a href="#"> Korrekturhinweise</a></li>
          <li><a href="#"> Optimierungsvorschläge</a></li>
          <li><a href="#"> Prozessübersicht</a></li>
        </ul>
      </div>
      <div class="slide"><img src="img/slideup.png" width="16" height="15" alt=""/</div>
    </div>

currently Js is

$(".slide").click(function(){
    $(this).prev().children().slideToggle("slow", function() { 

    });
});

now how can i change the img slideup.png to slidedown.png when the ul is hidden , the following works but it replaces all images from all widgets.

  if ($('div.widgetbox>ul').css("display")=="none") {  
      $(".slide>a>img").attr("src", "img/slidedown.png");
  }
  else{ 
      $(".slide>a>img").attr("src", "img/slideup.png");
  }

SULFIKAR A N · Accepted Answer · 2014-04-16 14:02:44Z

1

You can give id for img tag eg:

<img src="flower.png" id="image"/>

then

$(".slide").click(function(){
    $(this).prev().children().slideToggle("slow", function() { 
       $('#image').attr('src','sample.png');
    });});

answered Apr 16, 2014 at 14:02

SULFIKAR A N

4464 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Neox Over a year ago

result will be same, it will be repetation of codes to write new new id for every new box

Collectives™ on Stack Overflow

Jquery Slide Toggle - How to change image on toggle?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related