Skip directly to content

Update to jQuery/CSS Expandable Content

on Fri, 08/19/2011 - 20:23

I updated the expandable div code today to accomodate divs that are shorter (and thus don't need to be expanded).  It's a simple change:

<script type="text/javascript">
$(document).ready(function () {
	// expander
	$('.expandme').each(function(){
		if($(this).height() > 450){
			$(this).removeClass('expandme');
			$(this).addClass('expand');
			$('<a class="expander">See More...</a>')
				.attr('href', '#' + $(this).attr('id'))
				.click(function(){ 
					$(this).parent().toggleClass("expand", 500); 
					$(this).hide();
					return false;
				})
				.appendTo($(this));
		}
	});
});
</script>

And then you just change the class on the expandable div to be 'expandme' instead of 'expand.'

<div id="topten" class="expandme">
	<h2>Top 10 Resources</h2>
	<ol>
		<li>List items go here...</li>
	</ol>
</div><!-- end topten -->

 

Post new comment