jquery semantic-ui tab transitions

Question

I am trying to use transitions in tabbed layout.

I am working on Laravel Framework. My js code doesn't work...

Desired outcome: the tab content appear and disapper with transitions implemented.

Now: the tabs switch properly, but instantly - with no transitions.

$('#tabnavigation .item').click(function() {

$('.ui .tab .segment').transition('slide down');
});

my view looks like this:

    <a class="item red active" data-tab="first">One</a>
    <a class="item blue" data-tab="second">Two</a>
    <a class="item blue" data-tab="third">Three</a>
    <a class="item blue" data-tab="fourth">Four</a>
    <a class="item blue" data-tab="fifth">Five</a>



  </div>


  <div class="ui tab segment active" data-tab="first">

      @include('widgets._15_elections_introduction')



  </div>
  <div class="ui tab segment" data-tab="second">




       @include('widgets._15_elections_bycandidate')




  </div> {{-- second --}}
  <div class="ui tab segment" data-tab="third">


      @include('widgets._15_elections_byelectoralcommitee')



  </div>

  <div class="ui tab segment" data-tab="fourth">


      @include('widgets._15_elections_add_refine')



  </div>

  <div class="ui tab segment" data-tab="fifth">


      @include('widgets._15_elections_help')



  </div>

Anyone to help me?

Please state what you have tried and specify how "[your] code doesn't work". — Eric Tobias, Aug 05 '15 at 09:11
Can you reproduce it somewhere? Here is a [JSFiddle](http://jsfiddle.net/efp8z6Ln/) for Semantic-UI, try placing the code there and posting it. If it's reproducible, we should be able help. — tcigrand, Aug 05 '15 at 19:39
Done. http://jsfiddle.net/9wkkLc1c/4/ I didn't think of it before. Thanks — Peter, Aug 06 '15 at 20:41

score 4 · Accepted Answer · answered Aug 08 '15 at 17:23

The reason why nothing happens is because your selector is wrong - .ui .tab .segment means you are looking for an element that has the class segment inside an element that has the class tab inside an element that has the class ui. Instead, what you need to look for is an element that has all those classes, meaning you need to remove the spaces. If you'd like to learn more about selectors, this might be a good place to start.

In short, replacing $('.ui .tab .segment').transition('slide down'); with $('.ui.tab.segment').transition('slide down'); will make it work...well, sort of. It still won't do what you want since, at the time your click event happens, the tab is already displayed and the transition method will simply hide it.

In order to do what you want, you need to:

Hide the tab that displayed, since this already happened by the time jQuery click event triggers.
Show the previous tab, in order to hide it using an animation.
Apply transition on both the current and the previous tab - this will hide one and display the other.
Remember the current tab so that you know to use it as previous in the next tab change.

Here's the code that does just that:

 $(document).ready(function () {
     // remember the tab currently active
     var previous = $('.ui.tab.segment.active');

     $('#tabnavigation .item').tab({
         onVisible: function (e) {
             var current = $('.ui.tab.segment.active');
             // hide the current and show the previous, so that we can animate them
             previous.show();
             current.hide();

             // hide the previous tab - once this is done, we can show the new one
             previous.transition({
                 animation: 'horizontal flip',
                 onComplete: function () {
                     // finally, show the new tab again
                     current.transition('horizontal flip');
                 }
             });

             // remember the current tab for next change
             previous = current;
         }
     });
 });

Note: I used Semantic UI's onVisible event instead of the click event - this is generally a good idea and it makes sure the tab content became visible, so that we can hide it and animate it.

BTW. You might wish to link your solution to the relevant issue @ the project's github page: https://github.com/Semantic-Org/Semantic-UI/issues/2030 Unless you do it within 3 days, I will go there to paste URL to your answer. Thx again. — Peter, Aug 09 '15 at 22:39

score 1 · Answer 2 · answered Sep 11 '17 at 10:10

1

Use this format <div class="ui transition transition-type in tab" data-tab="tab-name">

(i.e,) <div class="ui transition scale in tab" data-tab="tab-1">

It's working fine.

answered Sep 11 '17 at 10:10

Mani Kasi

240
1
2
16

jquery semantic-ui tab transitions

2 Answers2