Skip to main content

Quick tutorial on creating a simple tab interface using just CSS, HTML and jQuery.

This Tabs is super light weight and super easy to build and customise.

View a Demo here.

Html:

Html consists of a unordered list with anchors links and the href contains the id of the tab to show.

Following that you add the divs with the id set accordingly to the links.
Note: the divs may nto include more divs.. with this only formatting tags like paragraph tags and bold.

<div id="tabs">
                <ul>
                        <li><a href="#tab-1">This is Tab 1</a></li>
                        <li><a href="#tab-2">Tab Two</a></li>
                        <li><a href="#tab-3">Tab Three</a></li>
                        <li><a href="#tab-4">Tab Four</a></li>
                </ul>
                <div id="tab-1">
                <h3>This is a really simple tabbed interface</h3>
                <img class="thumbs" alt="" src="http://papermashup.com/demos/jquery-gallery/images/t1.png" width="120" height="120" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus. Nullam bibendum scelerisque turpis. Aliquam erat volutpat.

                </div>
                <div id="tab-2">
                <h3>Tab 2</h3>
                <img class="thumbs" alt="" src="http://papermashup.com/demos/jquery-gallery/images/t2.png" width="120" height="120" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec

                </div>
                <div id="tab-3">
                <h3>Tab 3</h3>
                <img class="thumbs" alt="" src="http://papermashup.com/demos/jquery-gallery/images/t3.png" width="120" height="120" /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio.

                </div>
                <div id="tab-4">
                <h3>Tab 4</h3>
                Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur enim. Nullam id ligula in nisl tincidunt feugiat. Curabitur eu magna porttitor ligula bibendum rhoncus. Etiam dignissim. Duis lobortis porta risus. Quisque velit metus, dignissim in, rhoncus at, congue quis, mi. Praesent vel lorem. Suspendisse ut dolor at justo tristique dapibus. Morbi erat mi, rutrum a, aliquam nec, mattis semper, leo. Maecenas blandit risus vitae quam. Vivamus ut odio. Pellentesque mollis arcu nec metus.

                </div>
                </div>

Add the CSS:

            #tabs {

            }

            #tabs ul {
                margin:0px;
                padding:0px;
                width:400px;
            }

            #tabs ul li {
                list-style:none;
                background:#ffcccc;
                display:inline-block;
                padding:10px;
            }

            #tabs ul li.active {
                background:#ff6666;
            }

            #tabs ul li:hover {
                background:#fff;
            }

            #tabs div {
                padding:10px;
                width:600px;
                background:#fff;
            }

            #tabs div img {
                float:left;
                margin:0px 5px 0px 0px;
            }

         

Important to remember to include the jquery library.

jQuery Explanation:
First hide all the divs, then show the first div as the default visible div.
Add the Active class for the first div link to show the active div.

When another tab is clicked it removes the active class, and ads the active class to the clicked tab and also hides all the divs and then shows the chosen div by checking the clicked tab’s id.

Javascript:

$(document).ready(function(){
            $('#tabs div').hide();
            $('#tabs div:first').show();
            $('#tabs ul li:first').addClass('active');

            $('#tabs ul li a').click(function(){
                $('#tabs ul li').removeClass('active');
                $(this).parent().addClass('active');
                var currentTab = $(this).attr('href');
                $('#tabs div').hide();
                $(currentTab).show();
                return false;
            });
        });

And thats all there is to it.. Simple.

View a Demo here.
Questions? Drop me a comment. đŸ™‚

Janes Oosthuizen

Author Janes Oosthuizen

Programmer and Tech Junky from Cape Town, South-Africa. I have been programming for more than 15 years in various languages including ( CSS, HTML, javascript, PHP, MySQL, Wordpress and many other ).

More posts by Janes Oosthuizen

Join the discussion One Comment

Leave a Reply