jquery modular approach

development on jquery using a modular approach.

by amitavroy

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="wrapper container">
  <div class="row">
    <div class="col-sm-12">
      <h1>Let's try something new</h1>
      <ul class="feature-tabs nav nav-tabs">
        <li data-block="block-1" class="active">
          <a href="#">Test block 1</a>
        </li>
        <li data-block="block-2">
          <a href="#">Test block 2</a>
        </li>
        <li data-block="block-3">
          <a href="#">Test block 3</a>
        </li>
      </ul>

      <div id="block-1" class="data-block show">
        <h1>Block 1</h1>
        <p>Some random content can come here</p>
      </div>

      <div id="block-2" class="data-block hide">
        <h1>Block 2</h1>
        <p>More of random content is here.</p>
      </div>

      <div id="block-3" class="data-block hide">
        <h1>Block 3</h1>
        <p>Third block with some more random text just to show.</p>
      </div>

    </div>
  </div>
</div>

CSS

.hide {
  display: none;
}

.show {
  display: block;
}

JavaScript

var featureModule = (function() {
  var settings = {};

  var init = function(options) {
    settings.animate = (options.animate) ? options.animate : 'fadeIn';
    settings.tabs = (options.tabClass) ? options.tabClass : 'ul.feature-tabs li';
    addTabClickListeners();
  };

  var addTabClickListeners = function() {
    $(settings.tabs).click(function() {
      var blockId = $(this).data('block');
      handleTabClasses($(this));
      handleBlockVisibility(blockId);
    });
  };

  var handleTabClasses = function(tabLi) {
    clearTabClasses();
    tabLi.addClass('active');
  };

  var clearTabClasses = function() {
    $(settings.tabs).each(function() {
      $(this).removeClass('active');
    });
  };

  var handleBlockVisibility = function(blockId) {
    var block = $('#' + blockId);
    hideAllBlocks();
    block.addClass('show animated').addClass(settings.animate);
  };

  var hideAllBlocks = function() {
    $('div.data-block').each(function() {
      $(this).removeClass('show').addClass('hide');
    });
  };

  return {
    init: init
  }
})();

$(document).ready(function() {
  featureModule.init({
    animate: 'bounceInLeft',
    tabClasss: 'ul.feature-tabs li'
  });
});