sim.plified.com

Chris Pollock

Chris Pollock - web developer (PHP/mySQL & ASP.NET)
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.

13 Comments, Comment or Ping

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

  2. 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/

  3. 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.

  4. @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

  5. 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!

  6. @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.

  7. Rudy

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

  8. 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?

  9. @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

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

Reply to “Sliding content from a partial height with jQuery.”

Things I see

Amy and baby after storm cloud bike rideRochester storm cloudHuge storm cloud Rochester NYSad life preserver SimonHappy life preserver SimonFuture employee?Simon rides jasmineMicah with ear protectionMicah with ear protectionCIMG7660100_3672100_3666100_3661100_3650100_3643

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

Amy and baby after storm cloud bike rideRochester storm cloudHuge storm cloud Rochester NYSad life preserver SimonHappy life preserver SimonFuture employee?Simon rides jasmineMicah with ear protectionMicah with ear protectionCIMG7660100_3672100_3666100_3661100_3650100_3643