Clever Geek Handbook

Add image for readmore drop down

I want to know how to add a dropdown image for this script.

 <a onclick="showMoreOrLess(this,'restOfArticle');">+Sign In </a>
 <span id="restOfArticle" style="display:none"> </span>

Script

<script>function showMoreOrLess(thisObj, bonusContent) {
var caption = thisObj.innerHTML;
//alert(caption);
if (caption == "+Sign In") {
    document.getElementById(bonusContent).style.display = "inline";
    thisObj.innerHTML = "-Sign In";
} else {
    document.getElementById(bonusContent).style.display = "none";
    thisObj.innerHTML = "+Sign In";
}
}
</script>

I want to replace + and - with a small image icon, how do I do that?

+3


source to share


1 answer


Remove the +

or sign -

. Add a class to the anchor and then use a pseudo selector :before

.

Html

<a class="icon-left" onclick="showMoreOrLess(this,'restOfArticle');">Sign In </a>


CSS

.icon-left::before {
  content: url('Icon image URL here');
}
+1


source






More articles:


All Articles