Question

When I hover over a div, I want another div (which starts as display:none) to partially expand downward, revealing only the top of its contents. How can I partially expand a hidden div with jQuery? Preferably so that the div fades out towards the bottom. There don’t seem to be parameters for the toggle() command or fadeIn() that allow partial expansion.

Edit

Unfortunately, the requirements don’t allow a separate ‘teaser’ div to be used. The hidden div containing all the text has to be partially expanded.

Answer 1

Let’s say you want to only show the top 30 pixels of the hidden div:

var HowManyPixelsToShow = 30;

$(body).on({
   mouseenter: function() { ShowInfoBoxDiv($(this)); },
   mouseleave: HideInfoBoxes
}, '.info-box');

function ShowInfoBoxDiv(TheInfoBox) {
   //this assumes the 'more-info' divs are located after the '.info-box' divs
   TheInfoBox.next('.more-info') 
             .css('overflow':'hidden')
             .height(HowManyPixelsToShow)
             .slideDown(500);
}

function HideInfoBoxes() {
  $('.more-info').hide();
}