sim.plified.com

Chris Pollock

Chris Pollock - web developer & ecommerce entrepreneur
undivided… my thoughts on world, family, church, business, technology and Jesus Christ (all in all)

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.

Click here for the Demo Page.

  1. Let the height of the box be its full size when it loads in the browser.
  2. Attach a new attribute to each box the holds the height of the open slider div.
  3. 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.

  • Pingback: JQuery Tutorials | AndyPotanin.com

  • http://adrar.hostarea.org touhami

    tres utiles en effect ce script et tres pratique merci il peut servir

  • Pingback: Show Partial Content, Slide Show with jQuery | Website Builders Resource

  • http://www.websitebuildersresource.com 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/

  • http://neildonnelly.net/ 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.

  • http://web.simplifiedbuilding.com 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

  • 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!

  • http://web.simplifiedbuilding.com 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.

  • Rudy

    Thanks Chris. Found it. It has also a nice fade effect! You made my day!

  • 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?

  • http://web.simplifiedbuilding.com 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

  • Pingback: jQuery slide with minimum height | Spoonfed Project

  • http://scottlenger.com Scott

    Ha, I think I googled your exact page title…and found a complete yet consice solution. Thanks!!

  • http://www.richsage.co.uk Rich Sage

    Great post – like Scott, first hit on Google and exactly what I needed – cheers! :-)

  • 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});

  • olive

    hi, can you please give the exact code for creating multiple sliders (content). As i tried to figure out the example from http://www.patterntap.com/stream, but i can't make it.

  • Seth

    This is script is what I need but modifying a bit. I want to change the "click" to a "hover" but doing so won't let me close the slider properly. Has anyone created a hover slider successful or know something? I want to be able to show partial height of content like this script.

  • http://www.thatawesomeshirt.com twig

    perfect!
    thanks for that!

  • john

    This is a great script!

    but after searching for a while in the stream I couldn't find the multi-slider option to display multiple sliders on my site.

    Could you point me in the right direction?

    Best regards,

    _j

  • http://web.simplifiedbuilding.com cwpollock

    @John

    Sorry it's been a while since I developed this. This page has two sliders on it, should give you an idea: http://patterntap.com/stream/index/125

    I think what you can see is that I fed the openSlider a unique ID that used that instead of the class to identify the box that I wanted to open.

  • Robbie

    Hey, thanks for this awesome script.

    I was wondering how difficult it would be to make it show the width instead of height?

    So a horizontal reveal

    Thanks again.

  • Robbie

    I need to get it to slide open from right to left. I've got it showing width instead of height, I just need to swap directions, is this possible?

  • Chris

    @Robbie,

    Don't know.. never tried it.. I'm assuming it could work just fine like that, let mek now how it turns out.

  • Dan

    I adapted Chris's code to get it working multiple times on one page and posted some instructions breaking the code down.

    Hope it helps

    http://establi.sh/notes/sliding-content-from-a-partial-height-with-jquery

  • Pingback: jQuery Slide from Partial Height | webtopx.net

  • Sumi

    Hi ,

    did anyone got this working fine in IE ?

    I used the same to show/hide contents of a div and in ie the div moves vertically down to a larger height as IE returns wrong values for .height().

    How can we fix this?

  • Sumi

    Hi,

    I got my issue resolved.

    I added lineheight to the div style. Also taking innerHeight() instead of height() .

    This works fine in ie, firefox and chrome.

  • http://www.xaluan.com game mobi online

    I have upload all script here so you can test easyer

    http://jsfiddle.net/FzLzX/

    ..

  • carlos

    I know this was a long time ago, but how would you put more than one or like 4 of these on a page using the classes and not id's?

  • http://conseil-recherche-innovation.net J.

    Hi,

    Thanks for your post.

    I use a jQ solution to store the initial height:

    $.myvar = { the_height : $('.my_class').height() };

    $('.my_class').height(300);

    $('.toggle-link').click(function() {
    $('.my_class').animate({height: $.myvar.the_height}, 500);
    return false;
    });

    But anyway, I don't understand why I have to bother with this problem. Is it a bug?

    J.

  • http://www.simpliromatadiatrofis.net Jean Lois

    Hello! Thank you very much for sharing with us. Unfortunately i can't make it work…could you please take a look?

    http://www.simpliromatadiatrofis.net/index.php?option=com_k2&view=item&id=178:revivogen-scalp-therapy-+-shampoo-+-conditioner&Itemid=39# in the product description

    thank you!!
    Dimitris

  • Roshan Shahare

    This is great,
    How to slide in upword direction then ?

  • marc

    Hi, ive been trying to use this plugin but i cannot get it to work on multiple div ID's.

    Also the http://patterntap.com/stream/index/125 give me a page doesnt exist error so i cannot view the examples. Anyone got any ideas of how to do this? Thanks

  • Anonymous

    Just want to say: thank you for spreading your code.

  • http://giantsschool.com VIJAY

    I really liked the plugin. I just want to see how this works with multiple ID's. It will be very helpful if you consider my request.

    Thank you in advance.

  • Rixo

    Hi, sorry to bother you after so long time you developed such amazing pluging – it comes handy, but it won't work in Webkit (Chrome, Safari) if content floating or LI are display:inline for example. Any chance to get fix or workaround? Thanks!

  • Drew

    Thank You A Lot!

Things I see

My mom found these. Married 14 years this June to @amylpollock #marriage #iloveit#gvll practice at Aberdeen#amerksGreat practice tonight #gvllPhotoSharingT-minus 6 days to sping training #littleleague #gvllGrandma and Grampa are back.PhotoSnowing again. Baseball starts in a week!They might be cannibals.#lego #spring. A collaboration from Isaac and Caleb.PhotoDeep snowPhoto

Chris Pollock

Web Developer - proficient in both PHP and ASP.NET.
Rochester, New York

View my web developement site.

View Chris Pollock's LinkedIn profile

My Pictures

My mom found these. Married 14 years this June to @amylpollock #marriage #iloveit#gvll practice at Aberdeen#amerksGreat practice tonight #gvllPhotoSharingT-minus 6 days to sping training #littleleague #gvllGrandma and Grampa are back.PhotoSnowing again. Baseball starts in a week!They might be cannibals.#lego #spring. A collaboration from Isaac and Caleb.PhotoDeep snowPhoto