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>

the HTML does not make sense :_|

Carlo
– Carlo

2014-03-25 16:52:38 +00:00
Commented Mar 25, 2014 at 16:52 — Carlo
– Carlo, Commented Mar 25, 2014 at 16:52
From where <a> gets started?

Dhaval Marthak
– Dhaval Marthak

2014-03-25 16:53:21 +00:00
Commented Mar 25, 2014 at 16:53 — Dhaval Marthak
– Dhaval Marthak, Commented Mar 25, 2014 at 16:53
Sorry guys I am blind. Now html is correct.

user3342042
– user3342042

2014-03-25 16:54:36 +00:00
Commented Mar 25, 2014 at 16:54 — user3342042
– user3342042, Commented Mar 25, 2014 at 16:54

T J · Accepted Answer · 2014-03-25 16:54:57Z

2

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');
}

answered Mar 25, 2014 at 16:54

T J

43.2k13 gold badges87 silver badges142 bronze badges

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

Comments

Mars Robertson · Accepted Answer · 2014-03-25 16:54:51Z

0

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).

answered Mar 25, 2014 at 16:54

Mars Robertson

13.3k13 gold badges73 silver badges93 bronze badges

Comments

Carlo · Accepted Answer · 2014-03-25 16:57:01Z

0

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(...) }

answered Mar 25, 2014 at 16:57

Carlo

2,11221 silver badges30 bronze badges

Comments

Joseph Dailey · Accepted Answer · 2014-03-25 16:57:05Z

0

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

need to set attribute 'src' so it should be:

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

answered Mar 25, 2014 at 16:57

Joseph Dailey

4,9352 gold badges18 silver badges18 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related