Collapsed Jquery Animated Tabs

by bizamajig

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.8.18/themes/base/jquery-ui.css">
<script src="https://dl.dropbox.com/u/791714/javascript/flexslider/flexslider1/jquery.flexslider-min.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.min.js"></script>
<div id="tabvanilla">
    <ul class="tabnav">
      <li><a href="#tab1">I Want To..</a></li>
      <li><a href="#tab2">Departments</a></li>
      <li><a href="#tab3">Government</a></li>
    </ul>

    <div id="tab1" class="cf">
      <div id="flexslider2" class="flexslider">
        <ul class="slides">
          <li>
            <div class="cell">  
              <h4>Pay</h4>
              <ul>
                <li><a href="http://egov.mansfield-tx.gov">Water / Utility Bill</a></li>
                <li><a href="http://ecourt.mansfield-tx.gov/">Tickets / Citations</a></li>
                <li>Library Fines</li>
                <li>MAC Activities / Programs</li>
              </ul>
            </div>

            <div class="cell">
              <h4>Check status of...</h4>
              <ul>
                  <li><a href="http://polarisweb.arlingtonlibrary.org/Polaris/default.aspx?ctx=23.1033.0.0.1">Library Rentals</a></li>
                <li>Code Compliance Inspections</li>
                <li>Park / Athletic Field Closings</li>
                <li>Street / Road Closings</li>
                <li>Projects</li>
              </ul>
            </div>
          </li><!-- li.slide1 -->

          <li>
            <div class="cell">
              <h4>Register or Enroll...</h4>
              <ul>
                <li>Library Rentals</li>
                <li>Code Compliance Inspections</li>
                <li>Park / Athletic Field Closings</li>
                <li>Street / Road Closings</li>
                <li>Projects</li>
              </ul>
            </div>
          </li><!-- li.slide2 -->

          <li>
            <div class="cell">
              <h4>Attend...</h4>
              <ul>
     ...

SCSS

body {  padding: 20px }

#tab1,
tab3 {  overflow: hidden }

#tab1 ol.flex-control-nav {  bottom: 0 }

/*Fix animation*/

.ui-tabs .ui-tabs-panel {  padding: 0 1em }

/*
.flex-container2 .flex-direction-nav li a {
    top:none;
    bottom:0;
}
*/

/* CLEARFIX */

/* For modern browsers */

/* For IE 6/7 (trigger hasLayout) */

.cf {  zoom: 1 }

#flexslider2 .slides {  padding: 0 1.5em }

#flexslider2 .slides .cell {
  float: left;
  display: inline;
}

.cf:before,
.cf:after {
  content: "";
  display: table;
}

.cf:after {  clear: both }

.cell ul {  padding: 0 1.2em }

#flexslider1 {  max-width: 300px }

.flex-control-nav,
.flex-direction-nav,
.slides {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex-direction-nav li .disabled {
  opacity: .3;
  filter: alpha(opacity=30);
  cursor: default;
}

.flex-direction-nav li .prev {  left: -16px }

.flex-direction-nav li .next {
  background-position: -52px 0;
  right: -16px;
}

.flex-direction-nav li a {
  width: 52px;
  height: 52px;
  margin: -13px 0 0;
  display: block;
  background: url(http://github.com/woothemes/FlexSlider/raw/flexslider1/theme/bg_direction_nav.png) no-repeat;
  position: absolute;
  top: 50%;
  cursor: pointer;
  text-indent: -999em;
}

.flex-control-nav li {
  margin: 0 0 0 5px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.flex-control-nav li:first-child {  margin: 0 }

.flex-control-nav li a.active {
  background-position: 0 -26px;
  cursor: default;
}

.flex-control-nav li a {
  width: 13px;
  height: 13px;
  display: block;
  background: url(http://github.com/woothemes/FlexSlider/raw/flexslider1/theme/bg_control_nav.png) no-repeat;
  cursor: pointer;
  text-indent: -999em;
}

.flex-control-nav li a:hover {  background-position: 0 -13px }

.slides:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.flexslider {
  margin: 0;
  padding: 0;
}

.flexslider .slides {  zoom: 1 }

.flexslider .slides > li {
  display:...

JavaScript

$(document).ready(function() {
    $.effects.effect.heightFade = function(o, done) {
        var el = $(this),
            mode = $.effects.setMode(el, o.mode || "show");
        el.animate({
            height: mode,
            opacity: mode
        }, {
            queue: false,
            complete: done
        });
    };
    $('#tabvanilla').tabs({
        hide: "heightFade",
        show: "heightFade",
        collapsible: true
    });

    $('#flexslider1').flexslider({
        animation: "fade",
        pauseOnHover: true,
        controlsContainer: ".flex-container1",
        directionNav: true,
        controlNav: true
    });

    $('#flexslider2').flexslider({
        animation: "fade",
        slideshow: false,
        pauseOnHover: true,
        useCSS: false,
        controlsContainer: ".flex-container2",
        directionNav: true,
        controlNav: true
    });

});