CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-pluginsjquery-selectors
Techie
Techie

Reputation: 45134

jQueryUI tabs switching with slideUp and slideDown

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

Upvotes: 0

Views: 763

Answers (2)

Mark Walters
Mark Walters

Reputation: 12400

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

Upvotes: 1

Rorchackh
Rorchackh

Reputation: 2181

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.

Upvotes: 1

Related Questions