Posted by: Kathirvel K on: July 1, 2011
This is explained how to do show more / show less option using jQuery for dynamically generated texts/links/lists.
jQuery code:
<script type="text/javascript" >
jQuery(function() {
var adjustheight = 40;
var moreText = "Show More";
var lessText = "Show Less";
jQuery(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
var listItem_size = jQuery(".more-block a").length
if (listItem_size < = 8 ) {
if (listItem_size < = 4 ) {
jQuery(this).find(".more-block").css('height', adjustheight1).css('overflow', 'hidden');
}
} else {
jQuery(".more-less").append('');
jQuery("a.adjust").text(moreText);
}
jQuery(".adjust").toggle(function() {
jQuery(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
jQuery(this).text(lessText);
}, function() {
jQuery(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
jQuery(this).text(moreText);
});
});
</script>
CSS Code:
<style>
#Tabs a.adjust{text-align:center; padding:5px;background: #333333 ; color:#FFFFFF; font-size:11px ; display:block ; width:65px ; cursor:pointer; height: 13px;line-height: 13px ; text-decoration:none; clear:both;}
#Tabs { padding: 0 0 2px 0; margin: 0; display:block;border:1px solid #999999; padding:6px; float: left; width:550px; clear:both;}
#Tabs ul{ display: block;float: left;margin: 0; padding: 0;}
#Tabs ul li{float:left; width:130px; list-style:none;}
#Tabs a{text-align:center; padding: 3px 10px;margin:5px;display:block;text-decoration: underline;font-size: 11px; color:#800000; word-wrap: break-word; float:left; width:100px; }
#Tabs a:hover{background:#A41B1B; color:#FFFFFF; text-decoration:none;}
</style>
HTML Code:
<div class="more-less"> <div class="more-block"> <ul> <li><a href="#"> Sample Link </a> <li><a href="#"> Sample Link </a> <li><a href="#"> Sample Link </a> <li><a href="#"> Sample Link </a> <li><a href="#"> Sample Link </a> <li><a href="#"> Sample Link </a> </ul> <div> </div>
