Bootstrap togglable tabs

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap-responsive.css">
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-transition.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tab.js"></script>
<script src="http://flexslider.woothemes.com/js/jquery.flexslider.js"></script>
<div class="row-fluid">
<div class="span9"> 
  <section id="tabs">
    <div class="bs-docs-example">
        <ul class="nav nav-tabs" id="myTab">
          <li><a href="#home">Home</a></li>
          <li  class="active"><a href="#profile">Profile</a></li>
        </ul>
        <div class="tab-content">
          
          <div class="tab-pane active" id="profile">
            
            <section class="slider">
              
              <div id="carousel2" class="flexslider">
                <ul class="slides">
                  <li>  1<img src="http://placehold.it/350x150" /> </li>
                  <li> 2<img src="http://placehold.it/350x150" /> </li>
                  <li> 3<img src="http://placehold.it/350x150" /> </li>
                  <li> 4<img src="http://placehold.it/350x150" /> </li>
                    <li> 5 <img src="http://placehold.it/350x150" /> </li>
                  <li> 6<img src="http://placehold.it/350x150" /> </li>
                  <li> 7<img src="http://placehold.it/350x150" /> </li>
                  <li>8 <img src="http://placehold.it/350x150" /> </li>
                </ul>
              </div>
            </section>
          </div>
        </div>
    </div>
    <hr class="bs-docs-separator">
  </section>
</div>
</div>

JavaScript

$('#myTab a').click(function (e) {
    e.preventDefault();
    $(this).tab('show'); 
      $('#carousel1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 400,
            itemMargin: 5,
            asNavFor: '#slider1'
          });

          $('#slider1').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel1",
          });
})  


   $(window).load(function(){
       initflexsliders();   
}); 


function initflexsliders(){
    
          $('#carousel2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            itemWidth: 400,
            itemMargin: 5,
            asNavFor: '#slider2'
          });

          $('#slider2').flexslider({
            animation: "slide",
            controlNav: false,
            animationLoop: false,
            slideshow: false,
            sync: "#carousel2",
          });
       }