Styling javascript function *show/hide* CSS/HTML/JS -
how style read more , show less? ive tried styling #tag1 alters 'read more' text first appears
heres js
<script> function toggleandchangetext(divid, tagid) { $("#"+divid).toggle(); if ($("#"+divid).css('display') == 'none') { $('#'+tagid).html('read more <i class="icon-circle-arrow-down"></i>'); } else { $('#'+tagid).html('show less <i class="icon-circle-arrow-up"></i>'); } }
and html
<a id="tag1" href="javascript:toggleandchangetext('a1', 'tag1');"> <p>read more <i class="icon-circle-arrow-down"></i></p> </a>
here text looks during every section...
the first 1 when first see button. user clicks on , 'show less' appears can see button further left , less padding on bottom. when user goes close show less button, read more appears stays in same position show less.
my question how go styling interactive read more/show less ones in position first read more is? sorry if confusing!
try :
$('#'+tagid).html('<p>read more <i class="icon-circle-arrow-down"></i></p>');
i guess have padding or margin on paragraphs
actually, you're replacing
<a id="tag1" href="javascript:toggleandchangetext('a1', 'tag1');"> <p>read more <i class="icon-circle-arrow-down"></i></p> </a>
by
<a id="tag1" href="javascript:toggleandchangetext('a1', 'tag1');"> read more <i class="icon-circle-arrow-down"></i></a>
Comments
Post a Comment