Expand and collapse link for an Div in vf page using Jquery.

Hi Friends,

This is a small but useful post to maintain UI of your Visualforce page,

to add show more link(for expand) and show less link(for collapse) on div (or any other HTML tag) when div height is more then expected size.

Look at the screen shot below:-

So to solve this issue you can use the following java script and jquery:-

	<apex:page standardController="Account" sidebar="false">
	<apex:form>
	<apex:pageBlock>
	<apex:pageBlockSection>
	<apex:outputField value="{!Account.Name}"/>
	<apex:pageBlockSectionItem>
	<apex:outputLabel value="Description"/>
	<apex:outputPanel>
	<div class="showmorefirm">
	<div class="moreblockfirm" id="Des" >
	<apex:outputField value="{!Account.Description}"/>
	</div>
	</div>
	</apex:outputPanel>
	</apex:pageBlockSectionItem>
	<apex:outputField value="{!Account.Phone}"/>
	<apex:outputField value="{!Account.Active__c}"/>
	</apex:pageBlockSection>
	</apex:pageBlock>
	</apex:form>
	<apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" />
	<script>
	function showMoreSetup()
	{
	// The height of the content block when it's not expanded
	var adjustheight = 30;
	var moreText = "Show More";
	var lessText = "Show Less";
	$(".showmorefirm > .moreblockfirm").each(function(){
	if ($(this).height() > adjustheight)
	{
	$(this).css('height', adjustheight).css('overflow', 'hidden');
	$(this).parent(".showmorefirm").append('<a href="javascript:void(o);" class="adjustFirm"></a>');
	$(this).parent(".showmorefirm").find("a.adjustFirm").text(moreText);
	$(this).parent(".showmorefirm").find(".adjustFirm").toggle(function() {
	$(this).parents("div:first").find(".moreblockfirm").css('height', 'auto').css('overflow-y', 'hidden');
	$(this).text(lessText);
	}, function() {
	$(this).parents("div:first").prepend($(this).parents("div:first").find(".moreblockfirm"));
	$(this).parents("div:first").find(".moreblockfirm").css('height', adjustheight).css('overflow', 'hidden');
	$(this).text(moreText);
	});
	}
	});
	}
	showMoreSetup();
	</script>
	</apex:page>

view raw showMoreLink hosted with ❤ by GitHub

Screen Shots:-

Hope this helps..

Thanks
Anurag Jain