GridTab is a jQuery plugin which will help you put any content in grid based responsive tabs.
If you have worked with some of the popular frameworks, you know the pain of creating responsive (and good-looking) tabs for various types of content presentations. Yes, there are some JS plugins (e.g Gridder.js) already available to assist on that issue. Unfortunately, some of them are not that done in favour of good user experience.
GridTab is a a great solution for the following UI pattern.
Let’s assume that you need a way to put some images in a great looking grid, each of them to show some additional info on click. By no means, there are many ways to achieve this; from simple toggle function to complex plugins.
GridTab has various ways in terms of layouts and selection options. Let’s have a look at them:
Responsive Grid Layout
A straight-forward solution, positioning images in a grid in 4 by 3 (in the demo version). When an image is clicked, additional content is shown below.
See the Pen GridTab Demo #1 by Petia (@designify-me) on CodePen.
Responsive Tab Layout
This example is almost the same as the grid layout, the difference is in the text tabs.
See the Pen GridTab Demo #2 by Petia (@designify-me) on CodePen.
Initially active tab & custom controls (next/prev and close)
Here the tabs are enhanced with some simple navigation which provide options to choose the tabs with next and prev arrow icons and a quick close option.
See the Pen GridTab Demo #3 by Petia (@designify-me) on CodePen.
Scroll to Active Tab
Gridtab also has the option to enable next/prev/close controls and scroll to active tab.
See the Pen GridTab Demo #4 by Petia (@designify-me) on CodePen.
Keep Tab Open
Again, user is assisted by handy tab navigation but the tabs are open at all times.
See the Pen GridTab Demo #5 by Petia (@designify-me) on CodePen.
Nested GridTabs
Nesting of tabs is possible, if you really need to implement such thing.
See the Pen GridTab Demo #6 by Petia (@designify-me) on CodePen.
Quick Setup & Use
Here is a quick way to start using GridTab. Alternatively, you can check some of the CodePen demos to help you out.
HTML
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>
CSS
Link the gridtab css file in your <head> tag.
<link rel="stylesheet" type="text/css" href="gridtab.min.css"/>
JS
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.
For more information on usage and options, refer to GridTab page.