Sep 15, 2008
Sliding content from a partial height with jQuery.
One of the request for the Pattern Tap Stream was the ability to show part of a post that then "slide down" when the reader clicked "read more". At first I thought this would be a cinch using jQuery's "slideDown()" command. I soon found that it did not support initially being open to a partial height. Below is a my brief explanation and code for how I accomplished a partial height slide with jQuery.
- Let the height of the box be its full size when it loads in the browser.
- Attach a new attribute to each box the holds the height of the open slider div.
- Set the height to the partial height you want. Remember to consider the line-height with the box height so that you don't have you text cut off.
Here's the code
var sliderHeight = "100px";
$(document).ready(function(){
$('.slider').each(function () {
var current = $(this);
current.attr("box_h", current.height());
}
);
$(".slider").css("height", sliderHeight);
$(".slider_menu").html('<a href="#">Read More</a>');
$(".slider_menu a").click(function() { openSlider() })
});
function openSlider()
{
var open_height = $(".slider").attr("box_h") + "px";
$(".slider").animate({"height": open_height}, {duration: "slow" });
$(".slider_menu").html('<a href="#">Close</a>');
$(".slider_menu a").click(function() { closeSlider() })
}
function closeSlider()
{
$(".slider").animate({"height": sliderHeight}, {duration: "slow" });
$(".slider_menu").html('<a href="#">Read More</a>');
$(".slider_menu a").click(function() { openSlider() })
}
See this in action on the Pattern Tap Stream page.
15 Comments, Comment or Ping
touhami
tres utiles en effect ce script et tres pratique merci il peut servir
Oct 23rd, 2008
Jason Maletsky
Thanks for the great plugin.
Created a modified version of your plugin that can also expand/hide with a content title.
Available here:
http://www.websitebuildersresource.com/2008/12/20/show-partial-content-slide-animate-with-jquery/
Dec 21st, 2008
Neil Donnelly
Thanks so much for your code. I spent a while trying to figure this out before stumbling across it.
One question, though: how can I get this to work with multiple sliding items on the page? As it is, when you click one slider menu link, it opens every sliding div on the page.
See here:
http://neildonnelly.net/slider/
Thanks in advance for any tips about making this work.
Jan 12th, 2009
cwpollock
@Neil
No problem. Simple answer. You need to change the open and close to work on based on an ID that you pass into the argument, and then replace ".slider" in the Jquery statements with the ID of the slider element you want to open. If you want to see a place where I used the slider when there were multiple instances on a page look at: http://patterntap.com/stream
Jan 13th, 2009
Rudy
Hi there,
Thanks a lot for this nifty slider. But I have the same question as Neil: How to make this work for multiple items on a page (where not all but only one slides open). You answered Neil on Jan 13th, but I do not understand that answer. Also, it seems the page you refer to (http://patterntap.com/stream) doesn't seem to show this behaviour.
Could you please explain to me how to implement this with multiple sliding items on the page?
Thanks in advance!
Jan 16th, 2009
cwpollock
@rudy
if you page thorough the stream you should come to a page which has an example of an article that is using the partial height function.
Jan 16th, 2009
Rudy
Thanks Chris. Found it. It has also a nice fade effect! You made my day!
Jan 17th, 2009
Scott
Using this method, where would I place
return false;so clicking on the link won't return me to the top of the page?Feb 4th, 2009
cwpollock
@scott
You can use jQuery to override the HREF attribute with javascript:void(0);
e.g $("you link selector").attr("href", "javascript:void(0)");
That should do it for you.
Chris
Feb 4th, 2009
Scott
Ha, I think I googled your exact page title…and found a complete yet consice solution. Thanks!!
May 5th, 2009
Rich Sage
Great post - like Scott, first hit on Google and exactly what I needed - cheers!
Oct 28th, 2009
Mikie Pee
Thanks for the great post. I was able to take a lot from your ideas. My application has dynamic content in the div which is sliding so your code doesn't work directly for me. I simplified your code and made it work with dynamic content. Somewhat hacky but it looks smooth and is simple.
// Define the slider and the starting height
var div = $("#slider");
var startHeight = 100;
// Set the height to 100% so you can get the absolute height
div.css('height', '100%');
var openHeight = div.height();
// Set back to start height and then do animation
div.css('height', startHeight+'px');
div.animate({'height': openHeight}, {duration: 500});
Feb 2nd, 2010
Reply to “Sliding content from a partial height with jQuery.”