Q:

Bootstrap toggleable tab menu pushing content down

I am trying to implement a toggleable tab menu through bootstrap and also using Material Design for bootstrap
I have a issue with the tabs after the first one always pushing its content down (below where the 1st tab content would be)
I have searched around and found a similar issue discussed here and also tried the solution provided but it didn't seem to work for me

$('#toggle-tabs a').click(function(e) {
  e.preventDefault()
  $(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
</script>
<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
<script src="https://use.fontawesome.com/abacba2780.js">
</script>

<div class="container-fluid">
  <!-- Content -->
  <div class="row">
    <!-- Nav tabs -->
    <div class="col-sm-2">
      <ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
        <li class="nav-item elegant-color-dark">
          <a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
            <h3>Test1</h3>
          </a>
        </li>
        <li class="nav-item elegant-color-dark">
          <a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
            <h3>Test2</h3>
          </a>
        </li>
        <li class="nav-item elegant-color-dark">
          <a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
            <h3>Test3</h3>
          </a>
        </li>
      </ul>
    </div>
  </div>
</div>
<!-- Tab panels -->
<div class="tab-content vertical col-sm-10" id="toggle-tabs">
  <!--Panel 1-->
  <div class="tab-pane fade in show active" id="test1" role="tabpanel">
    <h3>Test1</h3>
  </div>
  <!--Panel 2-->
  <div class="tab-pane fade in" id="test2" role="tabpanel">
    <h3>Test2</h3>
  </div>
  <!--Panel 3-->
  <div class="tab-pane fade in" id="test3" role="tabpanel">
    <h3>Test3</h3>
  </div>
</div>
<link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
</script>

A:

You need to remove the show class from the default active tab, so tab-pane fade in show active becomes tab-pane fade in active:

$('#toggle-tabs a').click(function(e) {
  e.preventDefault()
  $(this).tab('show')
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js">
  </script>
  <!-- Latest compiled and minified CSS -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
  <!-- Optional theme -->
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet">
  <!-- Latest compiled and minified JavaScript -->

  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript">
  </script>
  <script src="main.js" type="text/javascript">
  </script>
  <link href='https://fonts.googleapis.com/css?family=Roboto:300,400,700' rel='stylesheet' type='text/css'>
  <script src="https://use.fontawesome.com/abacba2780.js">
  </script>
</head>

<body>
  <div class="container-fluid">
    <!-- Content -->
    <div class="row">
      <!-- Nav tabs -->
      <div class="col-sm-2">
        <ul class="nav nav-tabs md-pills pills-secondary flex-column" role="tablist">
          <li class="nav-item elegant-color-dark">
            <a class="nav-link active" data-toggle="tab" href="#test1" role="tab"><br>
              <h3>Test1</h3>
            </a>
          </li>
          <li class="nav-item elegant-color-dark">
            <a class="nav-link" data-toggle="tab" href="#test2" role="tab"><br>
              <h3>Test2</h3>
            </a>
          </li>
          <li class="nav-item elegant-color-dark">
            <a class="nav-link" data-toggle="tab" href="#test3" role="tab"><br>
              <h3>Test3</h3>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- Tab panels -->
  <div class="tab-content vertical col-sm-10" id="toggle-tabs">
    <!--Panel 1-->
    <div class="tab-pane fade in active" id="test1" role="tabpanel">
      <h3>Test1</h3>
    </div>
    <!--Panel 2-->
    <div class="tab-pane fade in" id="test2" role="tabpanel">
      <h3>Test2</h3>
    </div>
    <!--Panel 3-->
    <div class="tab-pane fade in" id="test3" role="tabpanel">
      <h3>Test3</h3>
    </div>
  </div>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/css/mdb.min.css" rel="stylesheet">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.3.1/js/mdb.min.js" type="text/javascript">
  </script>
</body>

</html>

