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.

Related post:  10 Typography Tutorials to Help you Enhance Your Design Skills

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close