• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 155
  • Last Modified:

I need to change the color of a label

I am using the following code to hide then show text, and I have both "Read More" and "Read Less" tags to help the user navigate.  But I find it difficult to differentiate them.

Can someone show me how to make them have different colors??

Thanks,
newbieweb

<a href="#" onclick="var block=document.getElementById('FullTextPaymentTerms');
this.innerHTML=(block.style.display=='none')?'... Read Less':'... Read More';
block.style.display=(block.style.display=='none')?'':'none';return false;">... Read More</a></FONT></P>

0
newbieweb
Asked:
newbieweb
  • 3
1 Solution
 
PhatzerCommented:
This should work...
<style type="text/css">
.readmore { color: red; }
.readless { color: blue; }
</style>
 
<a href="#" onclick="var block=document.getElementById('FullTextPaymentTerms');
this.innerHTML=(block.style.display=='none')?'<span class=\'readless\'>... Read Less</span>':'<span class=\'readmore\'>... Read More</span>';
block.style.display=(block.style.display=='none')?'':'none';return false;"><span class=\'readmore\'>... Read More</a></FONT></P>

Open in new window

0
 
PhatzerCommented:
Sorry, this should be better:

<a href="#" onclick="var block=document.getElementById('FullTextPaymentTerms');
this.innerHTML=(block.style.display=='none')?'<span class=\'readless\'>... Read Less</span>':'<span class=\'readmore\'>... Read More</span>';
block.style.display=(block.style.display=='none')?'':'none';return false;"><span class="readmore">... Read More</a></FONT></P>

Tell me how that goes.
0
 
newbiewebSr. Software EngineerAuthor Commented:
I forgot to tell you.  This is for an eBay ad and they do not give me access to the header of the HTML file, just the body.

Could you do this in-line?

thanks,
newbieweb
0
 
PhatzerCommented:
Sure you can, means you'll need to change the CSS for '... Read more' twice though.

<a href="#" onclick="var block=document.getElementById('FullTextPaymentTerms');
this.innerHTML=(block.style.display=='none')?'<span style=\'color: red;\'>... Read Less</span>':'<span style=\'color: blue;\'>... Read More</span>';
block.style.display=(block.style.display=='none')?'':'none';return false;"><span style="color: blue;">... Read More<span></a></FONT></P>
0

Featured Post

2018 Annual Membership Survey

Here at Experts Exchange, we strive to give members the best experience. Help us improve the site by taking this survey today! (Bonus: Be entered to win a great tech prize for participating!)

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now