Kathirvel K

jQuery show more / show less option

Posted 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(".adjust").toggle(function() {
jQuery(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
}, function() {
jQuery(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');

CSS Code:

#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">
  <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>

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: