22Feb2009

jQuery slide effect with minimum height

minimum-slide

I recently had a project where I needed a way to show/hide content within a div similar to the SlideToggle() effect. The only difference was that I wanted to show part of the content within the div when the page loaded. Inspired by Chris Pollock , here’s what I came up with.

Also not that because the content within the div was delivered dynamically, I didn’t know how much text there would be. For example, if there was only a single line of text, yet the minimum height was set to a value more than the text, the effect would fail miserably. In order to avoid this, I checked to ensure the default height was greater than the minimum height. If it came up short, there would be no slide effect and only the text would be displayed.

Demo

Xhtml

<div id="container">
	<h1>jQuery slide with minimum height
	<h2>About Billabong</h2>
	<div id="wrap">
		<div>
			<p>Gordon Merchant founded Billabong in Burleigh Heads on the Gold Coast in 1973. Combining his passion for surfing with hard work, Gordon designed boardshorts, manufacturing them on the kitchen table and selling through local surf shops and markets.</p>
			<p>Gordon developed his own stitching technique, which made the garments more durable, cost effective and less labor intensive. He employed machinists, moved the operation into a factory, set up a distribution network and sponsored a team of renowned Australian surfers. The business thrived.</p>
			<p>Since those beginnings, Billabong has expanded its product range to include boardsport products such as wetsuits, watches, surfboards, snowboard outerwear and skateboarding apparel.</p>
			<p>Information courtesy of <a title="Billabong" href="http://www.billabong.com/us/">Billabong</a>.</p>
		</div>
		<div id="gradient"></div>
	</div>
	<div id="read-more"></div>
</div>

jQuery

$(function(){
	var slideHeight = 75; // px
	var defHeight = $('#wrap').height();
	if(defHeight >= slideHeight){
		$('#wrap').css('height' , slideHeight + 'px');
		$('#read-more').append('<a href="#">Click to Read More</a>');
		$('#read-more a').click(function(){
			var curHeight = $('#wrap').height();
			if(curHeight == slideHeight){
				$('#wrap').animate({
				  height: defHeight
				}, "normal");
				$('#read-more a').html('Close');
				$('#gradient').fadeOut();
			}else{
				$('#wrap').animate({
				  height: slideHeight
				}, "normal");
				$('#read-more a').html('Click to Read More');
				$('#gradient').fadeIn();
			}
			return false;
		});
	}
});

CSS

/* simple reset */
html,body,div,h2,p {margin:0;padding:0;}

html {
font:1em Arial, Helvetica, sans-serif;
color:#444;
}
a {color:#0087f1;}
p {margin-bottom:5px;}
#container {
margin:0 auto;
width:600px;
}
#container h2 {
font-size:20px;
color:#0087f1;
}
#wrap {
position: relative;
padding: 10px;
overflow: hidden;
}
#gradient {
width:100%;
height:35px;
background:url(images/bg-gradient.png) repeat-x;
position:absolute;
bottom:0;
left:0;
}
#read-more {
padding:5px;
border-top:4px double #ddd;
background:#fff;
color:#333;
}
#read-more a {
padding-right:22px;
background:url(images/icon-arrow.gif) no-repeat 100% 50%;
font-weight:bold;
text-decoration:none;
}
#read-more a:hover {color:#000;}
Sharing is caring.
  • Subscribe to our feed
  • Share this post on Delicious
  • StumbleUpon this post
  • Share this post on Digg
  • Tweet about this post
  • Share this post on Mixx
  • Share this post on Technorati
  • Share this post on Facebook
  • Share this post on NewsVine
  • Share this post on Reddit
  • Share this post on Google
  • Share this post on LinkedIn

Discussion

11 responses to "jQuery slide effect with minimum height"

  • Allan says:

    I’ve been looking for something like this. Looks great! Thanks.

  • Nicole says:

    This is exactly what I’ve been looking for too. Thanks so much for your help!

  • Jenn says:

    This is beautiful. Reworked a couple of lines to start at the maximum height and then shrink to the smaller size. Thank you!

  • junaid says:

    This is exactly what I’ve been looking for my website but how i can repeat that style because i am using that style for dynamic .Can you tell me after which code it’s will be repeat . i am waiting your good response please ….. !

  • Bern says:

    Great Post! Keep it up.

  • JJ says:

    Just wanted to let you know in the XHTML section, we have a rogue

  • JJ says:

    closing h1 tag

  • Im not good or guru as you r.. so i took this code then make litle hack.. this will help multi slide on one page.. and not apply to height over 60px as you config

    var sliderHeight = “60″;
    $(document).ready(function(){
    $(‘.game_info_slider’).each(function () {
    var current = $(this);
    current.attr(“box_h”, current.height());
    if(current.height()>sliderHeight) {
    current.css(“height”, sliderHeight);
    current.parent().find(“.slider_menu”).html(‘Read More‘);
    current.parent().find(“.slider_menu a”).click(function() { openSlider(current) })

    }
    }
    );

    });

    function openSlider(ojnow)
    {
    var open_height = ojnow.attr(“box_h”) + “px”;
    ojnow.animate({“height”: open_height}, {duration: “slow” });

    ojnow.parent().children(“.slider_menu”).html(‘Close‘);
    ojnow.parent().children(“.slider_menu”).children().click(function() { closeSlider(ojnow) })
    }

    function closeSlider(ojnow)
    {
    ojnow.animate({“height”: sliderHeight}, {duration: “slow” });
    ojnow.parent().children(“.slider_menu”).html(‘Read More‘);
    ojnow.parent().children(“.slider_menu”).children().click(function() { openSlider(ojnow) })
    }

  • I have upload all script here so you can test easyer

    http://jsfiddle.net/FzLzX/

    love you from http://www.xaluan.com

  • Scott says:

    I love the functionality, but somehow I end up with two toggles at the bottom. Initially one says “Close” and the other “Click to Read More.” After I click one, I get two toggles saying “Close” or two toggles saying “Click to Read More”. Any thoughts?

Leave a Comment