Hide partial div - toggle open on click

I know how to toggle an entire div, however I only want to hide all but the top 10% or top 100px, for example. And then when the div is clicked, the entire div opens.

I thought I saw this a while ago, but can't remember where.

Thanks.

$(document).ready(function() {
 // hides the slickbox as soon as the DOM is ready
  $('#slickbox').hide();

 // toggles the slickbo开发者_Python百科x on clicking the noted link
  $('#slick-toggle').click(function() {
 $('#slickbox').toggle(400);
 return false;
  });
});

Your code should be something in the lines of:

$(document).ready(function() {
    // hides the slickbox as soon as the DOM is ready
    $('#slickbox').animate({height: '20px'});

    // toggles the slickbox on clicking the noted link
    $('#slick-toggle').click(function() {
        $('#slickbox').animate({height: '100%'});
        return false;
    });
});

Take a look the image on my home page, is this kind of what you want to do? http://www.carsonshold.com/

I have it jet out when you hover over it, but that can easily be changed to a click. It somewhat complicated to do, and still isn't perfect in IE (the page loads and the clip isn't recognized until you hover over it).

It may be slightly different from what you want since I did this on an image rather than a div, so I needed to animate the clipping mask. The function I used is as follows:

var featureDuration = 300; //time in miliseconds

    $('#featured-img').hover(function() {
        $(this).animate({ left : "-164", clip: "rect(0px,384px,292px,0px)" },{queue:false,duration:featureDuration});            
    }, function() {
        $(this).animate({ left : "17px", clip: "rect(0px,203px,292px,0px)" },{queue:false,duration:featureDuration});
    });

If you want to animate the clip, you will need to insert this JS as well because it doesn't behave properly otherwise. http://www.overset.com/2008/08/07/jquery-css-clip-animation-plugin/

Take a look at the CSS in my code if you are unsure how I did the rest of it, or comment on here if you have any questions.

Cheers

Did this rather quickly, note it will only hide the bottom portion.

http://jsfiddle.net/loktar/KEjeP/

Simple toggle that changes the height, hiding the rest of the content within. Easy enough to animate as well, just modify the toggle functions to adjust the heights rather than adding a class.