Minimal Touch-enabled Tabs Plugin For jQuery - swichTab

swichTab is a small and mobile-friendly jQuery tabs plugin which enables you to switch between tabbed contents by clicking tabs or using swipe events on touch devices. Fully responsive based on CSS3 flexbox.

How to use it:

1. Insert the stylesheet swichTab.css and JavaScript swichTab.js into your webpage which has jQuery JavaScript library installed.

<link rel="stylesheet" href="/css/swichTab.css">
<script src="https://code.jquery.com/jquery-3.2.1.min.js" 
        integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" 
        crossorigin="anonymous">
</script>
<script src="/js/jquery.swichTab.js"></script>

2. The basic HTML markup.

<div class="tabGroup example">
  <ul class="swichtab-controller">
    <li data-swichtab="controller"><a href="#tab1">tab1</a></li>
    <li data-swichtab="controller"><a href="#tab2">tab2</a></li>
    <li data-swichtab="controller"><a href="#tab3">tab3</a></li>
  </ul>
  <div class="swichtab-contents">
    <div id="tab1" class="swichtab-panel" data-swichtab="target">
      <p>Tab 1</p>
    </div>
 
    <div id="tab2" class="swichtab-panel" data-swichtab="target">
      <p>Tab 2</p>
    </div>
 
    <div id="tab3" class="swichtab-panel" data-swichtab="target">
      <p>Tab 3</p>
    </div>
  </div>
  <!-- /.swichtab-contents -->
</div>
<!-- /.swichtab -->

3. Enable the tabs plugin with default settings.

$('.example').swichTab();

4. Enable the tabs to switch between tabbed contents using touch swipe events.

$('.example').swichTab({
  swiper: true
});

5. Set the initial tab on page load.

$('.example').swichTab({
  index: 0
});

6. Set the transition effect when switch between tabbed contents.

$('.example').swichTab({
  cahngePanel: 'toggle' // or 'fade'
});

---

This awesome jQuery plugin is developed by tkm-mur. For more Advanced Usages, please check the demo page or visit the official website.