#oTabsJS v1.3.0 Library to create ordered/linked tabbed content in HTML

##Synopsis This simple Javascript library has been created as a simple solution when you need to display tabbed content in the same order of a list. It is meant to speed up the html markup process and avoid list-content reference errors.

##Install and activate Simply include the js file (or minified js) in your html:

<script src="otabs.min.js"></script>

Place this JS line where you want oTabs to start working:

<script>
  new oTabs().init();
</script>

##How to use In your html create a list with this template:

<ul class="otabs">
  <li>..</li>
  ...
  <li>..</li>
</ul>

And then use this template where you want your tabbed content to appear:

<div class="otabs_content">
  <div>..</div>
  ...
  <div>..</div>
</div>

NOTE: you can use whatever type of HTML tag for the content (div is just an example)

####List-container binding If you're using this tool more than once in a page you'll need to bind each list with the appropriate tabbed content. You can simply do that using rel and id like this:

<ul class="otabs" rel="WHATEVER_YOU_WANT">
  ...
</ul>
...
<div class="otabs_content" id="WHATEVER_YOU_WANT">
  ...
</div>

##Secondary features ####Specific selection You can select a specific tab using the data-select attribute. Examples:

<ul class="otabs" data-select="42">

Valid values (default is 0):

####Reverse order You can reverse the display order of the content to be in the reversed order of the menu by using the reverse class like this:

<ul class="otabs reverse">

####Option-content binding If you don't want oTabsJS to automatically bind each option with the corresponding content in order, you can manually bind them adding the link class to the menu and using rel and id:

<ul class="otabs link">
  <li rel="content1">..</li>
  <li rel="content2">..</li>
  <li rel="content3">..</li>
</ul>
<div class="otabs_content">
  <div id="content2">..</div>
  <div id="content3">..</div>
  <div id="content1">..</div>
</div>

####Manually refresh oTabs on DOM changes

<script>
  var otabs = new oTabs().init();
  // ... whatever ...
  otabs.update();
</script>

##Styling To target this in your CSS you could use the .otabs class for the menu and .otabs_content for the area where the content displays.

The selected tab has the .active class and you can simply target the other tabs with :not(.active).

##Compile for production If you want to build your own minified version of this library you can do that using npm and gulp.

Install the dependencies (you'll need npm): npm install

Execute gulp to generate the file otabs.min.js (you'll need gulp): gulp

##Updating ####From v < 1.3.x Simply add this line where you want otabs to start working:

<script>new oTabs().init();</script>

##Changelog ####v1.3.0 [2016.10.11]

##License MIT License