Easy To Style Tabs Plugin With jQuery - SimpleTabs

Easy To Style Tabs Plugin With jQuery - SimpleTabs

This is simple, lightweight jQuery tabs plugin that is easy to customize using your own CSS.

The plugin transforms a group of DIV containers into an HTML list (unordered list) based tabbing system where the users are able to switch between tabbed content by clicking tabs.

1. Load the core stylesheet simpleTabs.css for the basic styling of the tabs.

<link rel="stylesheet" href="./simpleTabs.css">

2. Load the minified version of the jQuery SimpleTabs plugin after loading jQuery.

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" 
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" 
        crossorigin="anonymous"></script>
<script src="./simpleTabs.min.js"></script>

3. Create a group of DIV containers for the tabbed content and specify the title displayed in the tabs using the data-st-title attribute:

<div class="simpleTabs">
  <div data-st-title="Tab 1">
    Contents 1
  </div>
  <div data-st-title="Tab 2">
    Contents 2
  </div>
  <div data-st-title="Tab 3">
    Contents 3
  </div>
  ...
</div>

4. Call the function simpleTabs on the top container and the plugin will do the rest.

$('.simpleTabs').simpleTabs();

5. Customize the styles of the the tabbing system.

.simpleTabs > .simpleTabs_button > li {
  margin:0 5px 0 0; 
  border:1px solid #adb5bd; 
  color:#333; 
}
.simpleTabs >.simpleTabs_button > li.active {
  background:#e9ecef; 
  border-bottom:1px solid #e9ecef; 
}
.simpleTabs > .simpleTabs_contents {
  margin-top:-1px; 
  padding:5px 10px; 
  background:#e9ecef; 
  color:#333;
  border:1px solid #adb5bd; 
}

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

  • Publication date: 28.09.2018
  • Source