SEO-friendy Tabs Plugin With jQuery - mari-tabs

File Size: 180 KB
Views Total: 730
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
SEO-friendy Tabs Plugin With jQuery - mari-tabs

mari-tabs is a semantic, SEO-friendly tabs plugin for jQuery that transforms lists of blocks into tabs with subtle fade in and fade out animations.

Depends on jQuery and GSAP (for smooth HTML5 animations).

How to use it:

1. Install & Download the mari-tabs with NPM.

# NPM
$ npm install mari-tabs --save

2. Create unordered lists for the tabs & tabbed content.

<div class="tab-wrap">
  <ul class="mari-tabs-nav">
    <li class="active">
      Tab 1
    </li>
    <li>
      Tab 2
    </li>
    <li>
      Tab 3
    </li>
  </ul>

  <ul class="mari-tabs-content">
    <li class="active-content">
      Content 1
    </li>
    <li>
      Content 2
    </li>
    <li>
      Content 3
    </li>
  </ul>
</div>

3. Call the function on the tabbed content and specify the selector of tabs.

$(function(){

  $('.mari-tabs-content').mariTabs({
    nav: '.tabs-nav'
  });

});

4. Apply your own CSS styles to the tabs.

.mari-tabs-nav {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  z-index: 2;
}

.mari-tabs-nav li {
  background-color: #cbd1d8;
  padding: 20px 30px;
  -webkit-transition: .5s;
  -o-transition: .5s;
  transition: .5s;
  color: #11460c;
  font-size: 17px;
}

@media (max-width: 680px) {
  .mari-tabs-nav li {
    width: 33.3333333333%;
    text-align: center;
    padding: 20px 10px;
    font-size: 16px;
  }
}

@media (max-width: 500px) {
  .mari-tabs-nav li {
    font-size: 15px;
  }
}

.mari-tabs-nav li.active {
  background-color: white;
  color: gray;
}

.mari-tabs-nav li:hover {
  cursor: pointer;
}

.mari-tabs-content {
  position: relative;
  z-index: 2;
}

.mari-tabs-content li {
  background-color: white;
  opacity: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: opacity 0.5s;
  -o-transition: opacity 0.5s;
  transition: opacity 0.5s;
  width: 100%;
  padding: 0 20px;
  color: gray;
  position: relative;
}

.mari-tabs-content li.active-content {
  opacity: 1;
  height: auto;
  padding: 30px 20px 30px 40px;
}

.mari-tabs-content li p {
  font-size: 18px;
}

@media (max-width: 500px) {
  .mari-tabs-content li p {
    font-size: 16px;
  }
}

.mari-tabs-content li p + p {
  padding-top: 20px;
}

.mari-tabs-content li:before {
  position: absolute;
  content: '';
  left: 20px;
  top: 30px;
  bottom: 30px;
  width: 2px;
  z-index: 1;
  background: #7b9075;
}

5. Goto a specific tab.

$('.mari-tabs-content').mariTabs('goTo', 3);

6. Event handlers which will be fired after tabs shown & hidden.

$('.mari-tabs-content').on('ml.shown.tab', function(e, index){
  // do something
});

$('.mari-tabs-content').on('ml.hidden.tab', function(e, index){
  // do something
});

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