How to build simple tabs with jQuery?

Question

I have the following code: fiddle

Which works great in websites I create my self and with no JS the tabs act as jump links to the relevant sections. When placed in the bespoke CMS I am forced to use at the moment the jump links don't work. I have tried adding more relative links to the tabs which makes it work with no JS but with JS the tabbed content doesn't show.

Am I missing something?

html:

<ul id="tabs">

      <li><a href="#tab1">test1</a></li>
      <li><a href="#tab2">test2</a></li>
      <li><a href="#tab3">test3</a></li>
      <li><a href="#tab4">test4</a></li>

</ul>
      <div class="container" id="tab1">Some content</div>
      <div class="container" id="tab2">Some content</div>
      <div class="container" id="tab3">Some content</div>
      <div class="container" id="tab4">Some content</div>

jQuery:

$('#tabs li a:not(:first)').addClass('inactive');
$('.container').hide();
$('.container:first').show();
$('#tabs li a').click(function(){
    var t = $(this).attr('href');
    $('#tabs li a').addClass('inactive');        
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');
    return false;
})

if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');         
    $(this).removeClass('inactive');
    $('.container').hide();
    $(t).fadeIn('slow');    
}

Answer 1

Include jquery:

https://code.jquery.com/jquery-3.1.1.min.js

HTML:

<br>
<div align="center" >
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-1" class="btn btn-info" >Tab 1</button>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="btn btn-info" >Tab 2</button>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-3" class="btn btn-info" >Tab 3</button>
</div>
<br />
<div class="gtabs demo" >
  <div class="gtab active tab-1">
    <h1>Gtab 1</h1>
  <button data-toggle="tab" data-tabs=".gtabs.demo" data-tab=".tab-2" class="ui button" >Tab 2</button>
  </div>

  <div class="gtab tab-2">
    <h1>Gtab 2</h1>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipiscelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut dolelit. Nisi minima fugit, est facere molestiae quod pariatur. Consectetur natus, blanditiis laborum possimus doloremque harum adipisci debitis similique, nostrum provident ut doli debitis similique, nostrum provident ut dolore.
    </p>
  </div>

  <div class="gtab tab-3">
    <h1>Gtab 3</h1>
  </div>
</div>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi consequatur qui nostrum deleniti, quaerat. Voluptate quisquam nulla, sit error, quas mollitia sint veniam at rem corporis dolore, eaque sapiente qui.
</p>

CSS:

.gtabs {
  position: relative;
  .gtab {
    background: #eee;
    position: absolute;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    padding: 10px;
    top: 5px;
    transition: all 0.4s;
    &.active {
      opacity: 1;
      visibility: visible;
      top: 0;
      transition: all 0.4s;
    }
  }
}

JS:

$("[data-toggle='tab']").click(function () {
  var tabs = $(this).attr('data-tabs');
  var tab = $(this).attr("data-tab");
  $(tabs).find(".gtab").removeClass("active");
  $(tabs).find(tab).addClass("active");
});

Demo: http://codepen.io/iksdatoo/pen/NjOZrm

Answer 2

Solution JSFiddle:: https://jsfiddle.net/incorelabs/mg6e4ren/74/

Implementing Tabs is really simple, I have modified the HTML for your question a bit. Removed the anchor tags coz they are not needed.

HTML

<ul>
    <li class="tab-switcher" data-tab-index="0" tabindex="0">
        Tab 1
    </li>
    <li class="tab-switcher" data-tab-index="1" tabindex="0">
        Tab 2
    </li>
    <li class="tab-switcher" data-tab-index="2" tabindex="0">
        Tab 3
    </li>
    <li class="tab-switcher" data-tab-index="3" tabindex="0">
        Tab 4
    </li>
</ul>
<div id="allTabsContainer">
    <div class="tab-container" data-tab-index="0">
        Some content for Tab - 1
    </div>
    <div class="tab-container" data-tab-index="1" style="display:none;">
        Some content for Tab - 2
    </div>
    <div class="tab-container" data-tab-index="2" style="display:none;">
        Some content for Tab - 3
    </div>
    <div class="tab-container" data-tab-index="3" style="display:none;">
        Some content for Tab - 4
    </div>
</div>

HTML De-Mystified

1. Add the "tab-switcher" class to each "li" element as well as tabindex="0" to make it accessible.
2. Give a "data-tab-index" attribute to each "li".
3. Add the "tab-container" class to each Tabbed Container. Also provide a "data-tab-index" attribute to each container which corresponds to the "data-tab-index" attribute on the "li" element.
4. Show only the container you want visible, hide the others using "display:none".
5. Provide a parent container for all the content of the tabbed containers. In this example this is the "allTabsContainer" div.

jQuery

$(document).ready(function () {
    var previousActiveTabIndex = 0;

    $(".tab-switcher").on('click keypress', function (event) {
        // event.which === 13 means the "Enter" key is pressed

        if ((event.type === "keypress" && event.which === 13) || event.type === "click") {

            var tabClicked = $(this).data("tab-index");

            if(tabClicked != previousActiveTabIndex) {
                $("#allTabsContainer .tab-container").each(function () {
                    if($(this).data("tab-index") == tabClicked) {
                        $(".tab-container").hide();
                        $(this).show();
                        previousActiveTabIndex = $(this).data("tab-index");
                        return;
                    }
                });
            }
        }
    });
});

jQuery De-Mystified

1. The click and keypress listener on the "tab-switcher" gets initialized on "document.ready". (Note: The keypress only registers the "Enter" key)
2. The variable "previousActiveTabIndex" keeps a track of the previous active tab so that if we press on the same tab again and again, it can be ignored.
3. We run an EACH loop on the "tab-container". This is done to know which tab should be displayed. If the "data-tab-index" data attribute on each matches, we display that tab.
4. We keep the value of the "data-tab-index" saved in "previousActiveTabIndex" which helps us keep a track of the previous tab which was clicked.

If there are doubts or if someone has suggestions, do comment on the post.

Answer 3

Responsive Tabs with AutoPlay feature. These don't need any plugin

Demo Link

Source Link

HTML

    <div class="row responsive-tab-wrapper">
        <div class="col-md-3 tab-items-list">
            <ul class="resp-tabs-list">
                <li class="resp-tab-item">TAB 1</li>
                <li class="resp-tab-item">TAB 2</li>
                <li class="resp-tab-item">TAB 3</li>
            </ul>
        </div>
        <div class="col-md-9 resp-tabs-container">
            <div class="resp-tabs-container-item">
                <div class="prod-tab-content">
                    <h4>TAB 1 TITLE</h4>
                    <p>
                        TAB 1 CONTENT
                    </p>

                </div>
            </div>
            <div class="resp-tabs-container-item">
                <div class="prod-tab-content">
                    <h4>TAB 2 TITLE</h4>
                    <p>
                        TAB 2 CONTENT
                    </p>
                </div></div>
            <div class="resp-tabs-container-item">
                <div class="prod-tab-content">
                    <h4>TAB 3 TITLE</h4>
                    <p>
                        TAB 3 CONTENT
                    </p>
                </div>
            </div>
        </div>
    </div>

CSS

    .responsive-tab-wrapper{
        -webkit-box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
        box-shadow: 0px 3px 25px -5px rgba(0,0,0,0.75);
        margin-top: 50px;
        padding: 15px
    }
    .resp-tabs-container{
        padding: 30px;

    }    
    .resp-tabs-list {
        padding: 0;
    }

    .resp-tabs-list i {
        margin-right: 15px;
        font-size: 24px;
    }

    .resp-tabs-list li {
        cursor: pointer;
        border-bottom: solid 1px #e4eae1;
        line-height: 55px;
        padding-left: 15px;
        font-weight: 300;
        font-size: 18px;
        /* transition: all 0.5s ease; */
        -webkit-transition: all 0.5s ease;
        -moz-transition: all 0.5s ease;
        -o-transition: all 0.5s ease;
        font-family: 'Hammersmith One', sans-serif;
        text-transform: uppercase;
        border-left: solid 2px #fff;
        list-style: none;
        white-space: nowrap; 
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .resp-tabs-list li:hover,
    .resp-tabs-list li.resp-tab-active,
    h3.resp-accordion:hover {
        background-color: #ffffff;
        /* border-bottom: 1px solid #BFE1B1; */
        border-left: solid 2px #3bc500;

    }



    h3.resp-tab-active,
    h3.resp-tab-active:hover {
        border-bottom: 1px solid #e7edee;
    }

    h3.resp-accordion {
        cursor: pointer;
        font-size: 18px;
        display: none;
        font-weight: 300;
        border-bottom: 1px solid #e7edee;
        margin: 0;
        line-height: 66px;
        transition: all 0.7s ease;
        -webkit-transition: all 0.7s ease;
        -moz-transition: all 0.7s ease;
        -o-transition: all 0.7s ease;
    }

    h3.resp-accordion:hover {}

    .resp-tab-content {
        display: none;
    }

    .resp-content-active,
    .resp-accordion-active {
        display: block;
    }


    /*-----------Vertical tabs-----------*/
    .resp-arrow {
        width: 0;
        height: 0;
        float: right;
        margin-top: 27px;
        margin-right: 15px;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 7px solid;
    }

    h3.resp-tab-active span.resp-arrow {
        border: none;
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-bottom: 7px solid;
    }

    /*-----------Accordion styles-----------*/
    h3.resp-tab-active {
        background: #dbfdcc;
        /* !important;*/
        border-color: #d3efc8;
    }

    .resp-easy-accordion h3.resp-accordion {
        display: block;
    }

    .resp-jfit {
        width: 100%;
        margin: 0px;
    }

    .resp-tab-content-active {
        display: block;
        background: #e7edee;
        padding: 0 25px 25px;
    }

    .prod-tab-content img{
        width: 300px;
        float: right;
    }

    /*Here your can change the breakpoint to set the accordion, when screen resolution changed*/
    @media only screen and (max-width: 980px) {
        ul.resp-tabs-list {
            display: none;
        }

        h3.resp-accordion {
            display: block;
            padding-left: 25px;
        }
        .resp-accordion-closed {
            display: none !important;
        }
        .prod-tab-content{
            padding: 10px;
        }
    }

jQuery

 $(function () {
        var startItemIndex = 0;
        var tabItemContainer = ".resp-tabs-container";
        var tabItemList = $(".resp-tabs-list");
        var tabInterval;
        var tabIntervalTime = 3000; //In milliseconds
        var stopOnHover = true;

        tabItemList.find(".resp-tab-item").each(function(index,val){
            var itemHeading = $(this).html();
            $(tabItemContainer).find(".resp-tabs-container-item").eq(index).before('<h3 class="resp-accordion" data-listindex="'+index+'"><span class="resp-arrow"></span>'+itemHeading+'</h3>');
        });

        $(tabItemContainer).find(".resp-tabs-container-item h3.resp-accordion").on("click", function () {
                var itemIndex = $(this).index();
                changeIndex(itemIndex);
                clearInterval(tabInterval);
                startAutoTab();
            });

        function changeIndex(itemIndex) {
            tabItemList.find(".resp-tab-item").removeClass("resp-tab-active");
            tabItemList.find(".resp-tab-item:eq(" + itemIndex + ")").addClass("resp-tab-active");

            if($(window).width()<980){
                $(tabItemContainer).find(".resp-tabs-container-item").slideUp();
                $(tabItemContainer).find(".resp-tabs-container-item:eq(" + itemIndex + ")").stop().slideDown();
            }else{
                $(tabItemContainer).find(".resp-tabs-container-item").hide();
                $(tabItemContainer).find(".resp-tabs-container-item:eq(" + itemIndex + ")").stop().fadeIn();
            }

            $(tabItemContainer).find("h3.resp-accordion").removeClass("resp-tab-active");
            $(tabItemContainer).find("h3.resp-accordion").eq(itemIndex).addClass("resp-tab-active");

        }
        changeIndex(startItemIndex);
        tabItemList.find(".resp-tab-item").on("click", function () {
            var itemIndex = $(this).index();
            changeIndex(itemIndex);
            clearInterval(tabInterval);
            startAutoTab();
        });

        $(document).find(tabItemContainer).find("h3.resp-accordion").on("click", function () {
            var itemIndex = $(this).attr("data-listindex");
            changeIndex(itemIndex);
            clearInterval(tabInterval);
            startAutoTab();
        });
        function startAutoTab() {
            tabInterval = setInterval(function () {
                var isHovered = false;
                if(stopOnHover)
                isHovered = ($('ul.resp-tabs-list').is(":hover") || $('div.resp-tabs-container').is(":hover"));
                if (!isHovered) {
                    var totalTabs = tabItemList.find(".resp-tab-item").length;
                    if (totalTabs == ($("ul.resp-tabs-list .resp-tab-item.resp-tab-active").index() + 1)) {
                        $(".resp-tab-item").eq(0).trigger("click");
                    } else {
                        $(".resp-tab-item.resp-tab-active").next().trigger("click");
                    }
                }
            }, tabIntervalTime);
        }
        startAutoTab();
    });

Answer 4

    <script>
 $('.tabheading li').click(function () {
        var tabid = $(this).attr("rel");
        $(this).parents('.tabcontainer').find('.active').removeClass('active');
        $('.tabbody').hide();
        $('#' + tabid).show();
        $(this).addClass('active');

        return false;
    });
</script>

Click here

Answer 5

I am guessing your website is having problems with href, i presume that when user clicks a href, website automatically eradicating itself.

Here is new solution's jsFiddle.

I have a new solution for you:

updated jQuery:

$('#tabs li a').click(function(){
  var t = $(this).attr('id');

  if($(this).hasClass('inactive')){ //this is the start of our condition 
    $('#tabs li a').addClass('inactive');           
    $(this).removeClass('inactive');

    $('.container').hide();
    $('#'+ t + 'C').fadeIn('slow');
 }
});

---

new html markup:

<ul id="tabs">

      <li><a id="tab1">test1</a></li>
      <li><a id="tab2">test2</a></li>
      <li><a id="tab3">test3</a></li>
      <li><a id="tab4">test4</a></li>

</ul>
<div class="container" id="tab1C">1Some content</div>
<div class="container" id="tab2C">2Some content</div>
<div class="container" id="tab3C">3Some content</div>
<div class="container" id="tab4C">4Some content</div>

Answer 6

$(document).ready(function() {
$("#content div").hide(); // Initially hide all content
$("#tabs li:first").attr("id","current"); // Activate first tab
$("#content div:first").fadeIn(); // Show first tab content
$('#tabs li a').click(function(e) {
    e.preventDefault();
    if ($(this).attr("id") == "current"){ //detection for current tab
     return       
    }
    else{             
    $("#content div").hide(); //Hide all content
    $("#tabs li").attr("id",""); //Reset id's
    $(this).parent().attr("id","current"); // Activate this
    $( $(this).attr('href')).fadeIn(); // Show content for current tab
    }
});

});

See Demo: http://jsfiddle.net/pradeepk00786/5ezT3/