Create Simple and Quick Responsive Tabs

A quick tutorial showing an easy and quick way to create simple responsive tabs with HTML/CSS and a little bit of jQuery.

There is also a snippet on codepen, so you can fork the project and adjust the tabs to your needs.

simpletabs

Getting started

First of all, you need to create the tab nav so you need to create a simple list where that tabs are “a href” with assigned ids.In our case I am just naming the tabs #tab 1, tab 2… etc.

<ul class="tabs clearfix" data-tabgroup="first-tab-group">
 <li><a href="#tab1" class="active"><i class="fa fa-file-o"></i> Tab 1</a></li>
 <li><a href="#tab2"><i class="fa fa-file-o"></i> Tab 2</a></li>
 <li><a href="#tab3"><i class="fa fa-file-o"></i> Tab 3</a></li>
 <li><a href="#tab4"><i class="fa fa-file-o"></i> Tab 4</a></li>
 <li><a href="#tab5"><i class="fa fa-file-o"></i> Tab 5</a></li>
</ul>

Next, you need to create a

<section></section>

with the tab contents in divs. You should give a corresponding id to the divs so they show the content of the tabs.

<section id="first-tab-group" class="tabgroup">
 <div id="tab1">
 <h2>Heading 1</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac diam sollicitudin, euismod urna eu, mattis tellus. Vestibulum sodales mauris lorem, eu aliquet ex accumsan tempor. Sed accumsan lobortis bibendum. Ut vehicula nisl non rutrum tempor. Pellentesque faucibus facilisis augue, quis gravida felis laoreet fringilla. Fusce tincidunt imperdiet leo. Sed quam mi, mollis sed est non, varius varius massa. Morbi ultrices, diam gravida fringilla pretium, nisl orci scelerisque ipsum, eu facilisis odio risus vel sapien. Integer venenatis imperdiet ultrices. Fusce pulvinar odio quis leo blandit, in vestibulum neque viverra. Proin efficitur, augue vel viverra molestie, risus mauris dignissim tellus, eu mollis augue ante quis nunc. Fusce ac ante at felis sollicitudin pretium.</p>
 </div>
 <div id="tab2">
 <h2>Heading 2</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac diam sollicitudin, euismod urna eu, mattis tellus. Vestibulum sodales mauris lorem, eu aliquet ex accumsan tempor. Sed accumsan lobortis bibendum. Ut vehicula nisl non rutrum tempor. Pellentesque faucibus facilisis augue, quis gravida felis laoreet fringilla. Fusce tincidunt imperdiet leo. Sed quam mi, mollis sed est non, varius varius massa. Morbi ultrices, diam gravida fringilla pretium, nisl orci scelerisque ipsum, eu facilisis odio risus vel sapien. Integer venenatis imperdiet ultrices. Fusce pulvinar odio quis leo blandit, in vestibulum neque viverra. Proin efficitur, augue vel viverra molestie, risus mauris dignissim tellus, eu mollis augue ante quis nunc. Fusce ac ante at felis sollicitudin pretium.</p>
 </div>
 <div id="tab3">
 <h2>Heading 3</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac diam sollicitudin, euismod urna eu, mattis tellus. Vestibulum sodales mauris lorem, eu aliquet ex accumsan tempor. Sed accumsan lobortis bibendum. Ut vehicula nisl non rutrum tempor. Pellentesque faucibus facilisis augue, quis gravida felis laoreet fringilla. Fusce tincidunt imperdiet leo. Sed quam mi, mollis sed est non, varius varius massa. Morbi ultrices, diam gravida fringilla pretium, nisl orci scelerisque ipsum, eu facilisis odio risus vel sapien. Integer venenatis imperdiet ultrices. Fusce pulvinar odio quis leo blandit, in vestibulum neque viverra. Proin efficitur, augue vel viverra molestie, risus mauris dignissim tellus, eu mollis augue ante quis nunc. Fusce ac ante at felis sollicitudin pretium.</p>
 </div>
 <div id="tab4">
 <h2>Heading 4</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac diam sollicitudin, euismod urna eu, mattis tellus. Vestibulum sodales mauris lorem, eu aliquet ex accumsan tempor. Sed accumsan lobortis bibendum. Ut vehicula nisl non rutrum tempor. Pellentesque faucibus facilisis augue, quis gravida felis laoreet fringilla. Fusce tincidunt imperdiet leo. Sed quam mi, mollis sed est non, varius varius massa. Morbi ultrices, diam gravida fringilla pretium, nisl orci scelerisque ipsum, eu facilisis odio risus vel sapien. Integer venenatis imperdiet ultrices. Fusce pulvinar odio quis leo blandit, in vestibulum neque viverra. Proin efficitur, augue vel viverra molestie, risus mauris dignissim tellus, eu mollis augue ante quis nunc. Fusce ac ante at felis sollicitudin pretium.</p>
 </div>
 <div id="tab5">
 <h2>Heading 5</h2>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut ac diam sollicitudin, euismod urna eu, mattis tellus. Vestibulum sodales mauris lorem, eu aliquet ex accumsan tempor. Sed accumsan lobortis bibendum. Ut vehicula nisl non rutrum tempor. Pellentesque faucibus facilisis augue, quis gravida felis laoreet fringilla. Fusce tincidunt imperdiet leo. Sed quam mi, mollis sed est non, varius varius massa. Morbi ultrices, diam gravida fringilla pretium, nisl orci scelerisque ipsum, eu facilisis odio risus vel sapien. Integer venenatis imperdiet ultrices. Fusce pulvinar odio quis leo blandit, in vestibulum neque viverra. Proin efficitur, augue vel viverra molestie, risus mauris dignissim tellus, eu mollis augue ante quis nunc. Fusce ac ante at felis sollicitudin pretium.</p>
 </div>
</section>

The last part is to put the jQuery code which does the magic.

$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
 e.preventDefault();
 var $this = $(this),
 tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
 others = $this.closest('li').siblings().children('a'),
 target = $this.attr('href');
 others.removeClass('active');
 $this.addClass('active');
 $(tabgroup).children('div').hide();
 $(target).show();
 
})
Download Simple Responsive Tabs Source
I am using fontawesome icons for the tabs, but you can use whatever icon font you like. The codepen version is here if you want to adjust it to your needs.


Don’t struggle alone with projects

Join the creative community of UX, graphic, web designers and developers to get help with any design or dev project.


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *