WordPress.org

Forums

[resolved] WP-Bootstrap tabs fade (5 posts)

  1. eagerbob
    Member
    Posted 2 years 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:
    http://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?

  2. eagerbob
    Member
    Posted 2 years ago #

    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?

  3. eagerbob
    Member
    Posted 2 years ago #

    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?

  4. eagerbob
    Member
    Posted 2 years ago #

    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;
    }
  5. eagerbob
    Member
    Posted 2 years ago #

    resolved

Topic Closed

This topic has been closed to new replies.

About this Topic