Responsive Expanding Grid / Tab Layout Plugin For jQuery - Gridtab

Gridtab is a tiny jQuery plugin for creating responsive grid or tab layouts which allow the user to expand / hide web content by clicking on their corresponding grid/tab items.

How to use it:

1. Import the required style sheet gridtab.css as this:

<link rel="stylesheet" href="gridtab.css"> 

2. Create your grid / tab content using HTML description list tags: dl, dt and dd.

<dl class="gridtab-demo">
  <dt><img src="http://placehold.it/350x300?text=1"></dt>
  <dd>Content 1</dd>
  <dt><img src="http://placehold.it/350x300?text=2"></dt>
  <dd>Content 2</dd>
  <dt><img src="http://placehold.it/350x300?text=3"></dt>
  <dd>Content 3</dd>
  ...
</dl>

3. Place the plugin's JavaScript file gridtab.js after jQuery library but before you close the body.

<script src="//code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="gridtab.min.js"></script>

4. Initialize the plugin to convert the description list into a responsive grid layout.

$('.gridtab-demo').gridtab({
  grid: 6,
  layout: 'grid'
});

5. Initialize the plugin to convert the description list into a responsive tab layout.

$('.gridtab-demo').gridtab({
  grid: 6,
  layout: 'tab'
});

6. Config the layout at different screen sizes.

$('.gridtab-demo').gridtab({
  grid: 6,
  layout: 'grid',
  responsive: [{
    breakpoint: 991,
    settings: {
      grid: 4,
      contentPadding: 30
    }
  }, {
    breakpoint: 767,
    settings: {
      grid: 3,
      contentPadding: 20
    }
  }, {
    breakpoint: 520,
    settings: {
      grid: 2,
      contentPadding: 20
    }
  }]
});

7. All default configuration options to customize your layout.

$('SELECTOR').gridtab({

  // how many items per row
  grid: 4,

  // border width
  borderWidth: 2,

  // border color
  tabBorderColor: "#ddd",

  // space between tabs
  tabPadding: 25,

  // color of content border
  contentBorderColor: "#ddd",

  // content padding
  contentPadding: 35,

  // background color of content
  contentBackground: "#fff",

  // background color of active tab
  activeTabBackground: "#fff",

  // selectors
  selectors: {
    tab: '>dt',
    closeButton: '.gridtab__close',
    nextArrow: '.gridtab__next.gridtab__arrow',
    prevArrow: '.gridtab__prev.gridtab__arrow',
    disabledArrow: '.is-disabled'
  },

  config: {
    layout: 'grid',  'grid' or 'tab'
    keepOpen: false, // always open
    speed: 500, // animation speed
    activeTab: 0, // active tab index
    showClose: false,
    showArrows: false,
    scrollToTab:false,
    rtl:false
  },

  // for responsive
  responsive: null,

  // callbacks
  callbacks: {
    open: false,
    close: false
  }
});

Change log:

v2.1.1 (2016-12-01)

• added RTL support.

v2.0.1 (2016-11-30)

• JS update

v2.0.0 (2016-11-29)

• added nested tabs support
• custom selectors
• show close button
• show next/prev controls
• scroll to tab

---

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