jQueryUI tabs switching with slideUp and slideDown

0
votes

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

2
javascriptjqueryjquery-uijquery-pluginsjquery-selectors
Do you know that the smallest div height is going to be 800px or do you need to calculate this dynamically each time? – Mark Walters
Sorry I misunderstood that you wanted to slide down as well as up. Are these the only 3 tabs you have or are there lots. And how do you determine whether you want to slide up or down? i.e You want tab 1 to slide up to 800px when clicked but you want tab 2 to slide down to 1200px when clicked? – Mark Walters
yes that's exactly what I wanted – Techie
Did my answer below help at all? – Mark Walters

2 Answers

1
votes

You can cache the heights of all tabs when the dom is ready, create a global varibale called something like 'currentHeight' (default is 0 if you're not showing any tab initially, otherwise it should be the height of the initial tab), then on the click event of anchor tags, you can grab the height of the appropriate tab, subtract the currentHeight. If the result is positive, slideDown to that different. If it's negative, slideUp to the absolute value of the result. then of course, you have to update the currentHeight variable.

1
votes

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 } );
  });
});