JQUERY PLUGIN

GridTab

GRID BASED RESPONSIVE TABS

Features

GridTab is a lightweight jQuery plugin to create grid based responsive tabs.

Responsive
Lightweight and based on CSS3 flexbox
Set Grid for each breakpoint
Switch between Grid and Tab layout
Next, previous and close controls
Scroll to current tab
Custom selectors
Right-To-Left Support

Use Case

Girdtab could be a perfect solution for the following UI design pattern.

Package Managers

  
    # Bower
    bower install --save gridtab

    # NPM
    npm install gridtab

Demos

Gridtab supports two layout modes grid and tab. By default, it uses the grid layout. Click any tab and resize the window to see how it works.

Grid Layout

: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 7 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 11 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.


  $('.gridtab-1').gridtab({
      grid: 4,
      tabPadding: 0,
      borderWidth: 10,
      contentPadding: 40,
      responsive: [{
          breakpoint: 767,
          settings: {
              grid: 3,
              contentPadding: 20
          }
      }, {
          breakpoint: 520,
          settings: {
              grid: 2
          }
      }]
  });

Tab Layout

Tab 1: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 2: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 3: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 4: 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 5: 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 6: 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 7: 7 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 8: 8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 9: 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 10: 10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 11: 11 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 12: 12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.


  $('.gridtab-2').gridtab({
      grid: 6,
      borderWidth: 3,
      contentPadding: 40,
      config:{
        layout:'tab'
      },
      responsive: [{
          breakpoint: 1024,
          settings: {
              grid: 4,
          }
      }, {
          breakpoint: 767,
          settings: {
              grid: 3,
              contentPadding: 20
          }
      }, {
          breakpoint: 520,
          settings: {
              grid: 2
          }
      }]
  });

Initially active & nested tabs

Tab 1

This is an initially active tab, holding another gridtab. GridTab supports nested tabs.

: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
: 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.

Tab 2

2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.

Tab 3

3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.

Tab 4

4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.


  $('.gridtab-3').gridtab({
      grid: 4,
      borderWidth: 3,
      contentPadding: 40,
      config:{
        layout: 'tab',
        activeTab:1
      },
      responsive: [{
          breakpoint: 600,
          settings: {
              grid: 2,
              contentPadding: 30
          }
      }]
  });

Keep open, controls and scroll to tab

Tab 1: keepOpen, if set to true, ensures the tab doesn't slide up on second click. Gridtab also has the option to enable next/prev/close controls and scroll to active tab.
Tab 2: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 3: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 4: 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.


  $('.gridtab-5').gridtab({
      grid: 4,
      borderWidth: 3,
      contentPadding: 40,
      config:{
        layout: 'tab',
        activeTab:1,
        keepOpen:true,
        showClose:true,
        showArrows:true,
        scrollToTab:true
      },
      responsive: [{
          breakpoint: 600,
          settings: {
              grid: 2,
              contentPadding: 30
          }
      }]
  });

Custom Selectors

This is a short description Custom Selector: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
This is a short description Custom Selector: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
This is a short description Custom Selector: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
This is a short description Custom Selector: 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
This is a short description Custom Selector: 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
This is a short description Custom Selector: 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.


  $('.gridtab-6').gridtab({
      grid: 3,
      borderWidth: 3,
      tabPadding:10,
      contentPadding: 40,
      config:{
        showClose:true,
        showArrows:true,
        layout:'tab'
      },
      selectors:{
        tab:'.readmore',
        closeButton: '.closeBtn',
        nextArrow: '.nextBtn',
        prevArrow: '.prevBtn',
        disabledArrow: '.disabledBtn'
      },
      responsive: [{
          breakpoint: 600,
          settings: {
              grid: 2,
              contentPadding: 20
          }
      }, {
          breakpoint: 320,
          settings: {
              grid: 1
          }
      }]

  });

Right To Left

Tab 1: 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 2: 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 3: 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 4: 4 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 5: 5 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 6: 6 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 7: 7 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 8: 8 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 9: 9 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 10: 10 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 11: 11 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.
Tab 12: 12 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus sodales vitae massa mattis auctor. Mauris erat metus, cursus tincidunt leo sit amet, condimentum sollicitudin quam. Sed pharetra non nibh aliquam vulputate. Nullam dui dolor, venenatis sit amet diam nec, commodo sollicitudin augue.


  $('.gridtab-7').gridtab({
      grid: 6,
      borderWidth: 3,
      contentPadding: 40,
      config:{
        layout:'tab',
        activeTab:1,
        rtl:true,
        showClose:true,
        showArrows:true
      },
      responsive: [{
          breakpoint: 1024,
          settings: {
              grid: 4,
          }
      }, {
          breakpoint: 767,
          settings: {
              grid: 3,
              contentPadding: 20
          }
      }, {
          breakpoint: 520,
          settings: {
              grid: 2
          }
      }]
  });

Usage

Setting up GridTab is really simple

HTML Markup

Your markup should look something like this. It's a simple description list titles in <dt> tag and description or content to be shown on click in <dd> tag

<dl id="gridtab-1">
    <dt>Tab 1</dt>
    <dd>Tab 1 Description</dd>
    <dt>Tab 2</dt>
    <dd>Tab 2 Description</dd>
    <dt>Tab 3</dt>
    <dd>Tab 3 Description</dd>
</dl>

Stylesheet

Link the gridtab css file in your <head> tag

<link rel="stylesheet" type="text/css" href="gridtab.min.css"/>

Javascript

Include the gridtab js, ideally efore your closing <body> tag

<script type="text/javascript" src="gridtab.min.js"></script>

Initialization

Initialize the plugin as shown below:

<script>
    $(document).ready(function() {
        $('#gridtab-1').gridtab({
            grid:3
        });
    });
</script>

Where grid is the number of grids/tabs in a row

Settings

Basic Settings	Type	Default	Description
grid	integer	`4`	Number of grids or tabs per row
borderWidth	integer	`2`	Width of the borders.
tabBorderColor	string	`'#ddd'`	border color of the tabs (Hex Color Code).
tabPadding	integer	`25`	padding/spacing around the tabs.
contentBorderColor	string	`'#ddd'`	border color of the content section (Hex Color Code).
contentPadding	integer	`25`	padding/spacing around content section.
contentBackground	string	`'#fff'`	Background color for the content section (Hex Color Code).
activeTabBackground	string	`'#fff'`	Background color for the active tab (Hex Color Code).
responsive	Array	`null`	Array of objects having breakpoints and `settings` object which is enabled at a given `breakpoint`.
selectors	Object	see table below	Object with options to set custom selectors.
config	Object	see table below	Object with options to enable features like, setting initially active tab, next/prev controls, close button, transition speed etc.
callbacks	Object	`open:false, close:false`	Callbacks for the open and close states of the content section.

Selectors

selectors	Type	Default	Description
tab	string	`'> dt'`	By default, the click event is triggered on the entire tab (`'dt'`). This can be replaced with any custom selector within the `dt`. For example: `'.readmore'`.
closeButton	string	`'.gridtab__close'`	Custom class for the close button, if `'showClose'` is set to `true`.
nextArrow	string	`'.gridtab__next.gridtab__arrow'`	Custom class for the next button, if `'showArrows'` is set to `true`.
prevArrow	string	`'.gridtab__prev.gridtab__arrow'`	Custom class for the prev button, if `'showArrows'` is set to `true`.
disabledArrow	string	`'.is-disabled'`	Custom class for the disabled state of next/prev buttons, if `'showArrows'` is set to `true`.

Configuration

config	Type	Default	Description
layout	string	`'grid'`	Change the value to `'tab'` for a tab layout. By default, the layout is `'grid'` based.
keepOpen	Boolean	`false`	If set to `true` keeps the active tab open (Disables toggle).
speed	integer	`500`	Transition speed in milliseconds.
activeTab	integer	`0`	Initially active tab. For example, `1` enables the first tab.
showClose	Boolean	`false`	Shows the close button if set to `true`.
showArrows	Boolean	`false`	Shows the next/prev buttons if set to `true`.
scrollToTab	Boolean	`false`	Scrolls to the active tab on click
rtl	Boolean	`false`	Converts tab to RTL