Question

I’m using jQueryUI as my js library.
HTML

<ul>

        <li><a href="#fragment-1"><span>One</span></a></li>
        <li><a href="#fragment-2"><span>Two</span></a></li>
        <li><a href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1" style="height:1000px;">    </div>
    <div id="fragment-2" style="height:800px;"></div>
    <div id="fragment-3" style="height:1200px;"></div>

Jquery

  <script>
  $(document).ready(function() {
    $("#container").tabs(
    {
        fx: {opacity: 'toggle' }
    }
    );
  });
  </script>

Since my tabs(divs) are with different heights I want to add the slideUp and slideDown effect when switching tabs. So the height different will not be shown much.

Tab1(1000px) -> Tab12(800px) -> Tab3(1200px)

Heights should be vary like above. I don’t wanna slideUp or SlideDown the whole div(tab). Tab1(1000px) -> Tab1(800px). When switching to Tab2 from Tab1 200px should be slideUP. When switching to Tab3 from Tab2 400px should be slideDown.

How can I do it?

Thanks

Answer 1

I haven’t had a chance to test this properly but you should be able to get an idea from this.
Set currentHeight as a global variable, then when the page loads set the currentHeight variable to the height of the default or currently visible div.

Onclick of any of the anchor tags run a function to grab the height of the clicked div and then use the currentHeight variable to check the difference. Then subtract this difference from the height of the new div and animate to this new height. It is important in this example to set the currentHeight global variable to the new div height, before you animate (change it’s height) otherwise the next time you click a tab the calculation will not work.

var currentHeight = 0;

$(document).ready(function(){
  currentHeight = $('#fragment-1').height(); 
});

$(document).ready(function(){
  $('a[href*="#fragment"]').click(function(){

       var divID = $(this).attr('href');
       var heightDiff = $(divID).height() - currentHeight;
       var newHeight = $(divID).height() - heightDiff;
       currentHeight = $(divID).height();
       $(divID).animate( { height:newHeight } );
  });
});