HTML Tabs: Complete tutorial and plugin

How to use the plugin

Download the archive which contains all plugin and tutorial files. Extract the plugin folder and upload jquery.m.tabs.js (or its minified version: jquery.m.tabs.min.js), jquery.m.tabs.css and ajax-loader.gif to your web server.

Include jquery.m.tabs.css inside the head tag your html document

<link href="jquery.m.tabs.css" rel="stylesheet" type="text/css" />

Create your tabs markup

<div class="tabs">
  <ul>
    <li class="active-tab">
      <a href="#">First tab title</a>
    </li>
    <li>
      <a href="#">Second tab title</a>
    </li>
    <li>
      <a href="#">Third tab title</a>
    </li>
    <li>
      <a href="#">Fourth tab title</a>
    </li>
  </ul>
  <div>
    <div>
      <p>first tab content</p>
    </div>
    <div id="tab-2">
      <p>Second tab content</p>
    </div>
    <div id="tab-3">
      <p>Third tab content</p>
    </div>
    <div id="tab-4">
      <p>Fourth tab content</p>
    </div>
  </div>
</div>

Include the jQuery library (via Google’s CDN) and jquery.m.tabs.js inside the head tag or at the very bottom of your document, before the closing body tag

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<script src="jquery.m.tabs.js"></script>

Call Tabs function on the .tabs element. You can place the following code either in the head or body tag (depending on which tag you included the plugin file)

<script>
    (function($){
        $(document).ready(function(){
            $(".tabs").Tabs("fast");
        });
    })(jQuery);
</script>  

You can change the function call selector (".tabs") to anything you want (an id, class name, js variable etc.) – see CSS selectors. Additionally, you may insert multiple selectors by inserting comma separated values. For example:

<script>
    (function($){
        $(document).ready(function(){
            $("#tabs-1,#tabs-2").Tabs("fast");
        });
    })(jQuery);
</script>  

The speed parameter value (“fast”) sets the fade-in/out and height animations speed when switching between tabs. Its value can be “fast”, “slow” or an integer (e.g. 700) for milliseconds. If you don’t pass any parameter value, the speed defaults to zero which makes tabs switching instantaneous.

License

This work is released under the MIT License.
You are free to use, study, improve and modify it wherever and however you like.
https://opensource.org/licenses/MIT

Donating helps greatly in developing and updating free software and running this blog 🙂