Cacher is the code snippet organizer for pro developers

jQuery(function($) {
  //get hidden link and "click" it every x miliseconds
  var autoplayer = $('#autoplayer'),
    interval = setInterval(function() {
      autoplayer.trigger('click');
    }, 2000);
  //optional, stop autoplay on hover
  $('[data-uk-tab], .uk-switcher').on('mouseenter', function () {
    clearInterval(interval);
  });

});

.uk-container.uk-container-center
  h3.uk-margin-top Tab autoplayer
  ul.uk-tab(data-uk-tab="{connect:'#my-id'}")
    li
      a(href='') Tab 1
    li
      a(href='') Tab 2
    li
      a(href='') Tab 3
  ul#my-id.uk-switcher.uk-margin
    li
      a#autoplayer(href='#', data-uk-switcher-item='next')
      |      This slide contains a hidden link, that selects the next slide when clicked. The click is simulated by jacascript to mimic autoplay.
    li Content 2
    li Content 3
  h3 Load with second tab active
  ul.uk-tab(data-uk-tab="{connect:'#my-id2'}")
    li
      a(href='') Tab 1
    li.uk-active
      a(href='') Tab 2
    li
      a(href='') Tab 3
  ul#my-id2.uk-switcher.uk-margin
    li Content 1
    li
      | Content 2 (first open) just add
      code  class="uk-active"
      |  to the active tab.
    li Content 3
  h3 Load from url
  ul.uk-tab(data-uk-tab="{connect:'#my-id3'}")
    li#tab1
      a(href='') Tab 1
    li#tab2
      a(href='') Tab 2
    li#tab3
      a(href='') Tab 3
  ul#my-id3.uk-switcher.uk-margin
    li Content 1
    li Content 2 (first open)
    li Content 3
  ul.uk-subnav.uk-subnav-line
    li
      a(href='http://codepen.io/malles/debug/BNXrmO#tab1') Open with tab 1
    li
      a(href='http://codepen.io/malles/debug/BNXrmO#tab2') Open with tab 2
    li
      a(href='http://codepen.io/malles/debug/BNXrmO#tab3') Open with tab 3
  ul#my-id3.uk-switcher.uk-margin
    li Content 1
    li Content 2
    li Content 3
  h3 Control with JS
  ul#js-control.uk-tab(data-uk-tab="{connect:'#my-id4'}")
    li#tab1
      a(href='') Tab 1
    li#tab2
      a(href='') Tab 2
    li#tab3
      a(href='') Tab 3
  ul#my-id4.uk-switcher.uk-margin
    li
      | Content 1
      br
      code UIkit.switcher('#js-control').show(0);
    li
      | Content 2
      br
      code UIkit.switcher('#js-control').show(1);
    li
      | Content 3
      br
      code UIkit.switcher('#js-control').show(2);
  ul.uk-subnav.uk-subnav-line
    li
      a(onclick="UIkit.switcher('#js-control').show(0);") Open tab 1
    li
      a(onclick="UIkit.switcher('#js-control').show(1);") Open tab 2
    li
      a(onclick="UIkit.switcher('#js-control').show(2);") Open tab 3