CODEWITHSUNDEEP
jquerycsstwitter-bootstraptabs
Razvan Zamfir
Razvan Zamfir

Reputation: 4614

Bootstrap 4 tabbed content not working

I am trying to make a tabbed content with Bootstrap 4, which is very new to me. Here is what i have so far:

.tabbed-sidebar {
  margin-top: 1.5rem;
  border: 1px solid #d9d9d9;
  max-width: 320px;
  margin: 10px auto;
}

.tabbed-sidebar .tabbed-heading {
  color: #333;
  background-color: #fafafa;
  border-radius: 3px 3px 0 0;
  border-bottom: 1px solid #ccc;
  padding: 5px 5px 0 5px;
}

.tabbed-sidebar .nav-tabs {
  display: flex;
  border-bottom: none;
  margin-bottom: -1px;
}

.tabbed-sidebar .nav-tabs li {
 -webkit-flex: 1;
 -ms-flex: 1;
  flex: 1;
  padding-right: 1px;
}

.tabbed-sidebar .nav-tabs li a {
  text-decoration: none;
  color: #565656;
  display: block;
  border: 1px solid #ccc;
  padding: 5px;
  text-align: center;
  font-size: 12px;
  font-weight: bold;
}

.tabbed-sidebar .nav-tabs li a.active {
  border-bottom: 1px solid #fff;
  background: #fff;
}

.tabbed-sidebar .tabs-content {
  background: #fff;
  border-radius: 0 0 3px 3px;
  padding: 10px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="tabbed-sidebar">
  <div class="tabbed-heading">
    <ul class="nav nav-tabs">
      <li><a class="active" href="#popular" data-toggle="tab">Popular</a></li>
      <li><a href="#video" data-toggle="tab">Video</a></li>
      <li><a href="#topcomments" data-toggle="tab">Top comments</a></li>
    </ul>
  </div>
  <div class="tabs-content">
    <div class="tab-pane fade in active" id="popular">
      sqxq  
    </div>
    <div class="tab-pane fade" id="video">
      ssss
    </div>
    <div class="tab-pane fade" id="topcomments">
      dddd
    </div>
  </div>
</div>

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

There are 2 problems with this "tabbed content" as far as I can see:

  1. The content corresponding to the active tab is not reveled on document load;
  2. The content corresponding to the inactive tabs is not gradually hidden (faded out). Instead, its opacity is set to 0.

What am I doing wrong?

Upvotes: 1

Views: 2296

Answers (1)

Lucas Alencar
Lucas Alencar

Reputation: 350

First issue: The content corresponding to the active tab is not reveled on document load

From Boostrap 4 Official Documentation

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

Try this

<div class="tab-pane fade show in active" id="popular">

Second issue: The content corresponding to the inactive tabs is not gradually hidden (faded out). Instead, its opacity is set to 0.

In Bootstrap the .fade transition time is 0.15s, so you just need adjust it to your wishes. Ex:

CSS:

.fade {
  opacity: 0;
  transition: opacity 1.15s linear;
}

jQuery:

$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
  var current = e.target.getAttribute('href');
  var prev = e.relatedTarget.getAttribute('href');
  $(current).show();
  $(prev).hide();
});

Here's a fiddle

Upvotes: 1

Related Questions