Jquery - Change image attribute source if element is visible or hidden?

Question

I spent hours tried to manage why my code is not working. Basically I am trying to change image source if element "span" is hidden or visible (If it's visible It should display arrow up if it's hidden should display arrow down - without success for me.). Element span is hidden from default. After click on that arrow it hide or show longer text (that works fine). Can you try to help me with this code please ?. Thank you very much PS: jsfiddle

Jquery:

$(".content_wrap").each(function () {
  text = $(this).html();
  if (text.length > 350) {
      $(this).html(text.substr(0, 342) + '<span class="elipsis" style="display:none;">' + text.substr(343) + '</span><a color: #236EE8; class="elipsis" href="#"><img class="cond-arr" src="/css/arr-down.png" alt="arrow" /></a>');
    <!-- one line above is code where is my image -->
  }
});

$(".content_wrap > a.elipsis").click(function (e) {
   e.preventDefault(); //prevent from being added to the url
   $(this).prev('span.elipsis').fadeToggle(500);
});

if($('span.elipsis').is(':visible')){
  $('img.cond-arr').attr('href','/css/arr-up.png');
}else{
  $('img.cond-arr').attr('href','/css/arr-down.png');
}

HTML:

<div>
  <span class="content_wrap">Something very long longer than 350 letters</span> <!-- cut code after 342 letters hide rest and show arrow down to expand content. When is expanded show full code with arrow up to collapse content back to 342 letters and show arrow down again -->
  <span class="content_wrap">Something short less than 350 letters</span><!-- show full code without cut and without arrow as image -->
</div>

Answer 1

Well if you want to change the image source you need to change the src instead of href as follows

if($('span.elipsis').is(':visible')){
 $('img.cond-arr').attr('src','/css/arr-up.png');}
else{
 $('img.cond-arr').attr('src','/css/arr-down.png');
}

Answer 2

Not tested but looking at the structure of your code try this:

$(".content_wrap > a.elipsis").click(function (e) {
   e.preventDefault(); //prevent from being added to the url
   $(this).prev('span.elipsis').fadeToggle(500);

   // CHANGING IMAGE SHOULD BE DONE IN EACH CALLBACK
   if($('span.elipsis').is(':visible')){
     $('img.cond-arr').attr('href','/css/arr-up.png');
   }else{
     $('img.cond-arr').attr('href','/css/arr-down.png');
   }

});

Also - jsfiddle plnkr - cannot harm (it makes it easier for everyone).

Answer 3

A better solution could be wrapping the part to hide in a span and then hide that span.

Adding HTML element in a javascript conditional block doesn't sound like a scalable idea.

$(".content_wrap").each(function () {
  text = $(this).html();
  if (text.length > 350) {
      $(this).find('span.more').hide()
  }
});

and in CSS (if you don't have older browsers problems), specify the arrow image as a background

.someClass div.icon { background-image: url(...) }
.someClass:visible div.icon { background-image: url(...) }

Answer 4

  $('img.cond-arr').attr('href','/css/arr-down.png');

需要设置属性'src'所以它应该是：

  $('img.cond-arr').attr('src','/css/arr-down.png');