How to slide toggle bootstrap nav tabs?

Question

I am using bootstrap nav-tab in my page to toggle data. Here I am trying to add some simple effects to my page.when I click the tab I need slide toggle the tab content from left corner to right/top to bottom.

I tried this, but it's not working. What did I do wrong? or else is there any way in angularjs to do this?

 $(document).ready(function() { $(".tt").click(function() { $(".tab-content").slideDown("slow"); }); }); 

 .tab-content div { width: 53%; height: 90px; background: red; padding: 20px; margin: 10px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active tt"><a data-target="#a" data-toggle="tab">Home</a></li> <li class='tt'><a data-target="#b" data-toggle="tab">Menu 1</a></li> <li class='tt'><a data-target="#c" data-toggle="tab">Menu 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a">text1</div> <div class="tab-pane" id="b">text2</div> <div class="tab-pane" id="c">text3</div> </div> </div> 

http://jsfiddle.net/qEjXj/3261/

Answer 1

Sliding effect can be achieve via css animations . I have created a sample fiddle for explaining the same.

Fiddle

Animation Effect :

Bottom to top

@keyframes slideInFromBottom {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

Slide from Left

@keyframes slideInFromLeft {
      0% {
        transform: translateX(-100%);
      }
      100% {
        transform: translateX(0);
      }
    }

Hope this helps.

-Help :)

Answer 2

You can use the index of clicked .tt and toggle the tab-pane of clicked index. Here is an example in jQuery way.

 $(document).ready(function() { $(".tt").click(function() { $(".tab-content").find('.tab-pane').not(':eq('+$(this).index()+')').hide('slow'); $(".tab-content").find('.tab-pane').eq($(this).index()).toggle({ direction: "left" }, 2000); }); }); 

 .tab-content div { width: 53%; height: 90px; background: red; padding: 20px; margin: 10px; } 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <h3>Tabs</h3> <ul class="nav nav-tabs"> <li class="active tt"><a data-target="#a" data-toggle="tab">Home</a></li> <li class='tt'><a data-target="#b" data-toggle="tab">Menu 1</a></li> <li class='tt'><a data-target="#c" data-toggle="tab">Menu 2</a></li> </ul> <div class="tab-content"> <div class="tab-pane active" id="a">text1</div> <div class="tab-pane" id="b">text2</div> <div class="tab-pane" id="c">text3</div> </div> </div>