WP-Bootstrap tabs fade

  • Resolved eagerbob

    (@eagerbob)


    11 years, 9 months ago

    Hello all,

    I am working on a site based on WordPress Bootstrap.
    Theme is still pretty standard except for the templates and added css.

    I have a tabpanel on the site which works fine.
    Now I want to make it fade by adding the .fade class to the tab-pane.
    When I do that the content of my tabpanel disappears.
    If I click the tab the content re-appears.

    I made a reduced testcase on a clean install here:
    https://www.apecool.com/shopp/tabs-test

    My markup is the same as from the twitter bootstrap docs on github, with fade class added, like so:

    <div class="tabbable">
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>This is section 3.</p>
</div>

</div>
</div

    I looked into the functions file and saw that registering and enqueuing the bootstrap-tab script is commented out.
    Removing the comments (and from transitions) does not make any difference. I Checked that jQuery is loaded.

    What am I missing?

Viewing 4 replies - 1 through 4 (of 4 total)
  • Thread Starter eagerbob

    (@eagerbob)

    it turns out that you’ll have to add the in class to the active pane like so:

    <div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
<li><a href="#tab3" data-toggle="tab">Section 3</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane fade" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
<div class="tab-pane" id="tab3">
<p>This is section 3.</p>
</div>

</div>
</div>

    Now the first tab-pane shows its contents, but I still see no fading effect.
    What else could be needed to make this work?

    Thread Starter eagerbob

    (@eagerbob)

    OK, works now.
    Need to have fade on *all* tab-panes for it to work.

    I would have liked the fading-effect a bit slower though, anyway to achieve that?

    Thread Starter eagerbob

    (@eagerbob)

    I would have liked the fading-effect a bit slower though, anyway to achieve that?

    Ah, found it, it is just a CSS transition.

    .fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -moz-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
    Thread Starter eagerbob

    (@eagerbob)

    resolved

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘WP-Bootstrap tabs fade’ is closed to new replies.