jQuery Show Partial Content with Slide Animation

Demo

jQuery

// Set the initial height
var sliderHeight = "80px";

$(document).ready(function(){
	// Show the slider content
	$('.slider').show();
	
	$('.slider').each(function () {
		var current = $(this);
		current.attr("box_h", current.height());
	});
	
	$(".slider").css("height", sliderHeight);
});

// Set the initial slider state
var slider_state = "close";

function sliderAction()
{
	if (slider_state == "close")
	{
		sliderOpen();
		slider_state = "open"
		$(".slider_menu").html('<a href="#" onclick="return sliderAction();">Close</a>');
	}
	else if (slider_state == "open")
	{
		sliderClose();
		slider_state = "close";
		$(".slider_menu").html('<a href="#" onclick="return sliderAction();">More...</a>');
	}
	
	return false;
}

function sliderOpen()
{
	var open_height = $(".slider").attr("box_h")   "px";
	$(".slider").animate({"height": open_height}, {duration: "slow" });
}

function sliderClose()
{
	$(".slider").animate({"height": sliderHeight}, {duration: "slow" });
}

HTML

<div id="slider_wrapper">
	<div class="title">
		<a href="#" onclick="return sliderAction();">Content Title</a>
	</div>
	                    			
	<div class="slider">
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
		<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
	</div>
	
	<div class="slider_menu">
		<a href="#" onclick="return sliderAction();">More...</a>
	</div>
	
	<div class="bottom"></div>
</div>

Donate

If you found this article useful and would like to see more like it this please consider making a donation.