Building Tabs with JQuery, the most efficient and effective way?

Question

quick question and I know it might seem easy to very experienced programmers out there but I'm only learning and I'm trying to learn about best practices and how to do things most efficiently, so please bear with me! I'd really appreciate any advice.

I'm working with JQueryand I'm trying to make a simple Tab functionality. The way I've done it is I've created a ul containing multiple li then depending on the li clicked I update the content in a div on the page.

I've implemented this in JSFiddle so you can see my code: http://jsfiddle.net/javacadabra/oeh7Lj62/

I'm wondering If this is a good approach to making Tabs? and whether or not the way I show the one I click and hide the others is efficient, because let's say for example I had 20 tabs, would I need to have a show() for the tab clicked and hide() for the other 19? Or is there a more effective way of hiding the other tabs?

Again, I know it's a simple enough question but I'm just looking for advice on how to improve. Many thanks.

This is my js

 $(document).ready(function () {
                $('#mylist li').click(function (e) {
                    var tab = $(this).html();
                    if (tab == "one") {
                        $('#tab-1-list').show();
                        $('#tab-2-list').hide();
                        $('#tab-3-list').hide();
                    }
                    else if (tab == "two")
                    {
                        $('#tab-2-list').show();
                        $('#tab-1-list').hide();
                        $('#tab-3-list').hide();
                    } else {
                        $('#tab-3-list').show();
                        $('#tab-1-list').hide();
                        $('#tab-2-list').hide();
                    }
                });
            });

This is my html

<ul id="mylist">
            <li>one</li>
            <li>two</li>
            <li>three</li>        
        </ul>
        <div id="tab-content">
            <ul id="tab-1-list">
                <li>This is a bullet point for Tab 1</li>
                <li>This is a bullet point for Tab 1</li>
                <li>This is a bullet point for Tab 1</li>
            </ul>
            <ul id="tab-2-list">
                <li>This is a bullet point for Tab 2</li>
                <li>This is a bullet point for Tab 2</li>
                <li>This is a bullet point for Tab 2</li>
            </ul>
            <ul id="tab-3-list">
                <li>This is a bullet point for Tab 3</li>
                <li>This is a bullet point for Tab 3</li>
                <li>This is a bullet point for Tab 3</li>
            </ul>
        </div>

This is my css

#tab-1-list{display:none;}
#tab-2-list{display:none;}
#tab-3-list{display:none;}

Thank you

Answer 1

Most efficient way would be using classes instead of ids.

Attach a click event to the lis that are descendants of #mylist, get the index of the current li that was clicked using $(this).index() and .show() the element with class name .tab that has the same index using the .eq() selector.

$('#mylist > li').click(function() {
  $('.tab').hide().eq($(this).index()).show();
});

.tab {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<div id="tab-content">
  <ul class="tab" id="tab-1-list">
    <li>This is a bullet point for Tab 1</li>
    <li>This is a bullet point for Tab 1</li>
    <li>This is a bullet point for Tab 1</li>
  </ul>
  <ul class="tab" id="tab-2-list">
    <li>This is a bullet point for Tab 2</li>
    <li>This is a bullet point for Tab 2</li>
    <li>This is a bullet point for Tab 2</li>
  </ul>
  <ul class="tab" id="tab-3-list">
    <li>This is a bullet point for Tab 3</li>
    <li>This is a bullet point for Tab 3</li>
    <li>This is a bullet point for Tab 3</li>
  </ul>
</div>

---

You could also use .fadeIn() and .fadeOut() instead of .show() and .hide() respectively.

$('#mylist > li').click(function() {
  $('.tab').fadeOut().eq($(this).index()).fadeIn();
});

#tab-content {
  position: relative;
}
.tab {
  position: absolute;
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="mylist">
  <li>one</li>
  <li>two</li>
  <li>three</li>
</ul>
<div id="tab-content">
  <ul class="tab" id="tab-1-list">
    <li>This is a bullet point for Tab 1</li>
    <li>This is a bullet point for Tab 1</li>
    <li>This is a bullet point for Tab 1</li>
  </ul>
  <ul class="tab" id="tab-2-list">
    <li>This is a bullet point for Tab 2</li>
    <li>This is a bullet point for Tab 2</li>
    <li>This is a bullet point for Tab 2</li>
  </ul>
  <ul class="tab" id="tab-3-list">
    <li>This is a bullet point for Tab 3</li>
    <li>This is a bullet point for Tab 3</li>
    <li>This is a bullet point for Tab 3</li>
  </ul>
</div>

Answer 2

I can suggest you to use jQuery UI (http://jqueryui.com/).
Many other features too.

• Accordion
• Autocomplete
• Button
• Datepicker
• Dialog
• Menu
• etc

jQuery UI tab Example:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery UI Tabs - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>
</head>
<body>

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Nunc tincidunt</a></li>
    <li><a href="#tabs-2">Proin dolor</a></li>
    <li><a href="#tabs-3">Aenean lacinia</a></li>
  </ul>
  <div id="tabs-1">
    <p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
  <div id="tabs-3">
    <p>Mauris eleifend est et turpis. Duis id erat. Suspendisse potenti. Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. Vestibulum non ante. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Fusce sodales. Quisque eu urna vel enim commodo pellentesque. Praesent eu risus hendrerit ligula tempus pretium. Curabitur lorem enim, pretium nec, feugiat nec, luctus a, lacus.</p>
    <p>Duis cursus. Maecenas ligula eros, blandit nec, pharetra at, semper at, magna. Nullam ac lacus. Nulla facilisi. Praesent viverra justo vitae neque. Praesent blandit adipiscing velit. Suspendisse potenti. Donec mattis, pede vel pharetra blandit, magna ligula faucibus eros, id euismod lacus dolor eget odio. Nam scelerisque. Donec non libero sed nulla mattis commodo. Ut sagittis. Donec nisi lectus, feugiat porttitor, tempor ac, tempor vitae, pede. Aenean vehicula velit eu tellus interdum rutrum. Maecenas commodo. Pellentesque nec elit. Fusce in lacus. Vivamus a libero vitae lectus hendrerit hendrerit.</p>
  </div>
</div>


</body>
</html>

DEMO

Answer 3

This could be a possibility :

HTLM

<ul id="mylist">
    <li rel="tab-1-list">one</li>
    <li rel="tab-2-list">two</li>
    <li rel="tab-3-list">three</li>        
</ul>

I added a attribute rel for referencing the corresponding tabs via id

JQuery

$('#mylist li').click(function (e) {
    rel = $(this).attr('rel');

    $('#tab-content ul').hide(); //hide all tabs

    $('#' + rel).show(); //just show the corresponding
});

DEMO

Additionally you can have a look at Jquery UIs tabs. Here are a few example of how you can style these tabs.

Answer 4

Try this way:

DEMO

$(document).ready(function () {
    $('#mylist li').click(function (e) {
        var index = +($(this).index())+1;
        $('#tab-content ul').hide();
        $('#tab-'+index+'-list').show();
    });
});