Gridtab

GridTab is a lightweight jQuery plugin to create grid based responsive tabs https://gopalraju.github.io/gridtab

Generate Convert Improve

Install / Use

/learn @gopalraju/Gridtab

About this skill

Quality Score

0/100

README

GridTab jQuery Plugin

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

Demo

http://gopalraju.github.io/gridtab

Features

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

Package Managers

# Bower
bower install --save gridtab

# NPM
npm install gridtab

Usage

Setting up GridTab is really simple

HTML Markup

Your markup should look something like this

<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>
	<dt>Tab 4</dt>
	<dd>Tab 4 Description</dd>
	<dt>Tab 5</dt>
	<dd>Tab 5 Description</dd>
	<dt>Tab 6</dt>
	<dd>Tab 6 Description</dd>
</dl>

Where, <dt> contains the title of the tab nad <dd> contains the description to be shown on click.

Stylesheet

Just add a link to the css file in your <head>:

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

jQuery Plugin

Then, before your closing <body> tag add:

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

and 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 | 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. |

| 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|

Responsive Example

The responsive settings is where you reset the grids and other properties at a given breakpoint.

$('#gridtab-1').gridtab({
	grid:5,
	contentPadding: 40,
	responsive:[{
		breakpoint: 1024,
		settings:{
			grid:3,
			contentPadding: 30
		}
	},{
		breakpoint:767,
		settings:{
			grid:2,
			contentPadding: 25
		}
	},{
		breakpoint:520,
		settings:{
			grid:1,
			contentPadding: 20
		}
	}]
});

All properties under basic settings like: borderWidth, tabPadding, tabBorderColor, contentBorderColor, contentPadding, contentBackground and activeTabBackground, can be updated with the responsive settings.

Version

2.1.1

Browser support

GridTab works on IE10+ in addition to other modern browsers like Chrome, Firefox and Safari

Dependencies

jQuery 1.8.3 +

License

Licensed under the MIT license.

Related Skills

node-connect

349.0k

Diagnose OpenClaw node connection and pairing failures for Android, iOS, and macOS companion apps

frontend-design

109.4k

Create distinctive, production-grade frontend interfaces with high design quality. Use this skill when the user asks to build web components, pages, or applications. Generates creative, polished code that avoids generic AI aesthetics.

openai-whisper-api

349.0k

Transcribe audio via OpenAI Audio Transcriptions API (Whisper).

qqbot-media

349.0k

QQBot 富媒体收发能力。使用 <qqmedia> 标签，系统根据文件扩展名自动识别类型（图片/语音/视频/文件）。