Tabs

HTML

<script src="https://code.jquery.com/jquery-3.1.1.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 invisible" 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;
}
.invisible {
    display: none;
}

JavaScript

$(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) {
        console.log(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);
            }
        }
       ...