How to slide toggle bootstrap nav tabs?

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/

2 answers

  • answered 2018-07-12 07:04 Help

    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 :)

  • answered 2018-07-12 07:13 Kiran Shahi

    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>