How to make dynamic tabs using jquery

Question

I have this code for now aiming to create tabs:

    <ul class="nav nav-tabs">
        <li class="active">
            <a href="#custom-tab-0-8cf04a9734132302f96da8e113e80ce5" data-toggle="tab">Home</a>
        </li>
        <li>
            <a href="#custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" data-toggle="tab">Profile</a>
        </li>
    </ul>
    <div class="tab-content">
        <div id="custom-tab-0-8cf04a9734132302f96da8e113e80ce5" class="tab-pane active" tabindex="-1">
            Content goes here<br>
        </div>
        <div id="custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" class="tab-pane" tabindex="-1">
            Nothing comes here<br>
        </div>
    </div>

CSS:

ul.nav.nav-tabs {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #f1f1f1;
    margin-top: 2%;
}

ul.nav.nav-tabs li {
    float: left;
}
ul.nav.nav-tabs a {
    display: inline-block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    transition: 0.3s;
    font-size: 17px;
}
li.active {
    background-color: #ccc;
}

How can I create multiple tabs with jQuery, display the content of the the TAB that I click only and add a class active to it?

Note: I cannot change much on the html structure because it is a WordPress site and I used short-code to generate the tabs. I simply styled and tried the jQuery.

For now I can see all the content of all tabs at once.But what I want is only one tab active and the others closed. When I click on a next tab,it should display the content of that tab online,have the class active and deactivate the class active that the previous active tab had.

I started using this code just to test functionality when I click on each TAB but I don't think it is a good practice to use child selectors cause I might have more than 2 tabs:

$(document).ready(function()  {
    $("ul.nav.nav-tabs li:first-child a").click(function(){
        alert("You clicked on the first-child");
    });
    $("ul.nav.nav-tabs li:nth-child(2) a").click(function(){
        alert("You clicked on the second child");
    });            
});

Thanks in advance.

Lajos Arpad · Accepted Answer · 2016-09-27 08:50:29Z

1

Check out Visiblary:

/*
 * params:
 *     - selector: jQuery selector
 *     - init: function which gets the Visiblary object to initialize it
 *     - events: object/array
 *         - root: a selector which contain all the affected tags, default is "body"
 *         - types: array, which contains the string representation of the events
 *         - selector: inner selector to identify the target set
 *         - handler: handler function
 */
function Visiblary(params) {
    var instance = this;
    if (!params.toggleClass) {
        params.toggleClass = "invisible";
    }
    this.hideAll = function() {
        $(params.selector).addClass(params.toggleClass);
        return instance;
    };
    this.hideSubset = function(subsetSelector) {
        $(params.selector).filter(subsetSelector).addClass(params.toggleClass);
        return instance;
    };
    this.hideOnly = function(subsetSelector) {
        $(params.selector).not(subsetSelector).removeClass(params.toggleClass);
        $(params.selector).filter(subsetSelector).addClass(params.toggleClass);
        return instance;
    };
    this.showAll = function() {
        $(params.selector).removeClass(params.toggleClass);
        return instance;
    };
    this.showSubset = function(subsetSelector) {
        $(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
        return instance;
    };
    this.showOnly = function(subsetSelector) {
        $(params.selector).not(subsetSelector).addClass(params.toggleClass);
        $(params.selector).filter(subsetSelector).removeClass(params.toggleClass);
        return instance;
    };
    this.invert = function() {
        $(params.selector).each(function() {
            $(this).hasClass(params.toggleClass) ? $(this).removeClass(params.toggleClass) : $(this).addClass(params.toggleClass);
        });
        return instance;
    };
    if (!!params.init) {
        params.init(this);
    }
    if (!!params.events) {
        for (var event in params.events) {
            $(!!params.events[event].root ? params.events[event].root : "body").on(params.events[event].types.join(" "), params.events[event].selector, params.events[event].handler);
        }
    }
    return instance;
}

With that you can achieve what you want and more. invisible is a CSS class:

.invisible {
    display: none;
}

EDIT:

This file should be a separate .js file inside a script tag positioned below the script which loads jQuery. It is recommended to initialize your Visiblary objects inside the load event of $(function() {}). Example:

$(function() {
    //New visiblary object, things will be callable using visiblary.
    var visiblary = Visiblary({
        //Elements corresponding to selector
        selector: "#chat-window > .chat-content",
        //In this example we have a single event, which is clicking on
        //a .chat-tab-set child of #chat-window. This will trigger showOnly
        //with the index corresponding data-index
        events: [
            {
                root: "#chat-window > .chat-tab-set",
                types: ["click"],
                selector: ".chat-tab",
                handler: function() {
                    visiblary.showOnly(":eq(" + $(this).data("index") + ")");
                }
            }
        ]
    });
});

edited Sep 27, 2016 at 8:50

answered Sep 27, 2016 at 8:22

Lajos Arpad

80.4k42 gold badges123 silver badges235 bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Sidney Sousa Over a year ago

How exactly can I place this snippet in my jQuery file? inside the ready function? Please explain If you don't mind cause ma failing to make it work on my side

Lajos Arpad Over a year ago

@WosleyAlarico, you do not need to put it into the jQuery file. How is it not working for you? Do you get an error? What did you expect, what did you try and how did you fail?

Sidney Sousa Over a year ago

Here my snippet: jsfiddle.net/Wosley_Alarico/o993u9su/2 If you check from the snippet, only the content of the active tab is mean to be active.

Lajos Arpad Over a year ago

@WosleyAlarico, you forgot to add jQuery to your snippet and you did not really use Visiblary. I strongly suggest that you should use a few tutorials, because without those life will be very difficult. However, your problem is solved here: jsfiddle.net/o993u9su/3

Sidney Sousa Over a year ago

.Thanks for the help. I ended up having to use a plugin but your help was useful regardless and yes I need a more tutorials on jquery still. At the moment I only know basic jquery concepts that I allow me to play a bit with the DOM..But basic. I know there are lots of tutorials on the web but will also be glad if you can refer some good ones. Regards

|

Satpal · Accepted Answer · 2016-09-27 09:24:55Z

0

You can use index(element) method to get the index of element which is clicked in collection on matched elements. Note it return zero based position.

Search for a given element from among the matched elements.

//Hide inactive tab content
$('.tab-content :not(.active)').hide();

//Cache elements 
var navigationAnchorElements = $("ul.nav.nav-tabs li a");

//bind click handler
navigationAnchorElements.click(function(e) {
    e.preventDefault();

    //remove active class and hide content pane
    $('.tab-content .active').removeClass('active').hide();

    //Show current active content pane and add Class
    $(this.getAttribute("href")).addClass('active').show();

    //remove active class from parent elemets
    $("ul.nav.nav-tabs li.active").removeClass('active');

    //add active class to current element
    $(this).parent().addClass('active');

    var index = navigationAnchorElements.index(this) + 1;
    alert("You clicked on the " + index + " child" );
});

$(document).ready(function() {
  var navigationAnchorElements = $("ul.nav.nav-tabs li a");
  $('.tab-content :not(.active)').hide();
  navigationAnchorElements.click(function(e) {
    e.preventDefault();
    $('.tab-content .active').removeClass('active').hide();
    $(this.getAttribute("href")).addClass('active').show();

    $("ul.nav.nav-tabs li.active").removeClass('active');
    $(this).parent().addClass('active');

    var index = navigationAnchorElements.index(this) + 1;
    //  alert("You clicked on the " + index + " child" + this.dataset.id);
  });
});

ul.nav.nav-tabs {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid #ccc;
  background-color: #f1f1f1;
  margin-top: 2%;
}
ul.nav.nav-tabs li {
  float: left;
}
ul.nav.nav-tabs a {
  display: inline-block;
  color: black;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: 0.3s;
  font-size: 17px;
}
li.active {
  background-color: #ccc;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active">
    <a href="#custom-tab-0-8cf04a9734132302f96da8e113e80ce5" data-toggle="tab">Home</a>
  </li>
  <li>
    <a href="#custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" data-toggle="tab">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div id="custom-tab-0-8cf04a9734132302f96da8e113e80ce5" class="tab-pane active" tabindex="-1">
    Content goes here
    <br>
  </div>
  <div id="custom-tab-0-cce99c598cfdb9773ab041d54c3d973a" class="tab-pane" tabindex="-1">
    Nothing comes here
    <br>
  </div>
</div>

edited Sep 27, 2016 at 9:24

answered Sep 27, 2016 at 7:46

Satpal

134k13 gold badges168 silver badges171 bronze badges

4 Comments

Sidney Sousa Over a year ago

How can I display the content of the tab that I click only and add the class active to it? Thanks in advanced

Satpal Over a year ago

@WosleyAlarico jsfiddle.net/ff6jsf9h note I have use data-href instead of href for anchor tabs in you application you should use href so you can replace $(this.dataset.href) with $(this.href)

Sidney Sousa Over a year ago

I tested from your jsfiddle and it works. But when I replace $(this.dataset.href) with $(this.href). The expected does not happen when I click on a tab. Of course I also replaced the html snippet with the one I have. please check my snippet:jsfiddle.net/Wosley_Alarico/o993u9su/1

Satpal Over a year ago

@WosleyAlarico, use this.getAttribute("href") instead of this.href updated code snippet jsfiddle.net/7ck0uLsy

Collectives™ on Stack Overflow

How to make dynamic tabs using jquery

2 Answers 2

8 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related