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?

Answer 1

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:

1. Hide the tab that displayed, since this already happened by the time jQuery click event triggers.
2. Show the previous tab, in order to hide it using an animation.
3. Apply transition on both the current and the previous tab - this will hide one and display the other.
4. 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.

Answer 2

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.