Question

This is my code :

HTML

<div style="float:left; width:100px;">
    <a class="openTab" href="http://www.link.it">1 Line</a>
    <div style="display:none;">My Text</div>
</div>    

<div style="float:left; width:100px;">
    <a class="openTab" href="http://www.link.it">3 Lines</a>
    <div style="display:none;">My Text<br /> on 3<br> Lines</div>
</div>        

<div style="float:left; width:100px;">
    <a class="openTab" href="http://www.link.it">2 Lines</a>
    <div style="display:none;">My Text<br /> on 2 Lines</div>
</div>            

<div class="fascia" style="display:none;">
    <div class="openedTab"></div>
</div>

CSS

.openedTab
{
    float:left;
    background-color:red;
}​

jQuery

$('.openTab').hover(function(e) {
    e.preventDefault();

    $('.openedTab').html($(this).next().html());

    $('.fascia').slideDown('200', function() { });
    
});​

if you hover a link, you can see the slideDown() in action (it scroll making animation).
Now, I’d like to have this animation to the max height for each div when I go hover it.

I mean : if I go on Link1 and than on Link2, I want to see the scroll to the bottom, starting from the height of Link1. Also, from Link2 to Link3, it must scroll to the top, till it get the height of content of link3.

How can I do it?

Answer 1

You should define the div height of the “.fascia”, then the .slideDown will work as you please.
You can always use .animate() and set the needed css with it.

EDIT:

To clarify, for a completely dynamic maximum height, you need to go through each element, determine their height and store the maximum value. Then add this to the desired element.

if you really wanted a dynamic height:

<div style="float:left; width:100px;" class="line">
    <a class="openTab" href="http://www.link.it">1 Line</a>
    <div style="display:none;">My Text</div>
</div>    

<div style="float:left; width:100px;" class="line">
    <a class="openTab" href="http://www.link.it">3 Lines</a>
    <div style="display:none;">My Text<br /> on 3<br> Lines</div>
</div>        

<div style="float:left; width:100px;" class="line">
    <a class="openTab" href="http://www.link.it">2 Lines</a>
    <div style="display:none;">My Text<br /> on 2 Lines</div>
</div>            

<div class="fascia" style="display:none;">
    <div class="openedTab"></div>
</div>

​

JavaScript

var elements = $('.line div'),
maxH = 0;

$.each(elements,function(key,val){
    var elH = $(elements[key]).css('display','').height();
    maxH = (elH > maxH) ? elH : maxH;
    $(elements[key]).css('display','none');
});

$('.fascia div').height(maxH);

$('.openTab').hover(function(e) {
    e.preventDefault();

    $('.openedTab').html($(this).next().html());

    $('.fascia').slideDown('200', function() { });

});​

Enjoy!