JQuery tabs displaying previous tab content

Question

When I click tab 2 it is displaying the content along with tab 1. I tried using prev() to hide the previous element. But it is hiding the whole tab menu and also active tab is not changing color. i have attached the jsfiddle link below https://jsfiddle.net/nn9bqpsn/1/

<div class="Tabs">
  <ul>
     <li id="tab1" class="Active">Tab 1</li>
     <li id="tab2">Tab 2</li>
     <li id="tab3">Tab 3</li>
  </ul>
</div>

<div id="tab1-content" class="Tab" style="display:none">
  <p>Tab 1 Content</p>
</div>

<div id="tab2-content" class="Tab" style="display:none">
  <p>Tab 2 Content</p>
</div>

<div id="tab3-content" class="Tab" style="display:none">
  <p>Tab 3 Content</p>
</div>
<script>
$(document).ready(function () {
    if ($('li #tab1 .active')) {
        $('#tab1-content').show();
    }
});

$('#tab1').click(function () {
 $('#tab1-content').prev().hide();
    $('#tab1-content').show();
});

 $('#tab2').click(function () {
 $('#tab2-content').prev().hide();
    $('#tab2-content').show();

});

 $('#tab3').click(function () {
  $('#tab3-content').prev().hide();
    $('#tab3-content').show();

});
</script>

I have also tried with anchor tag with href but still not working. Attached below the jsfiddle for tabs using href https://jsfiddle.net/cL42g4sb/

Is there a reason the built in jqueryui tab does not work for you? jqueryui.com/tabs — Steve0
@Steve Here is the one I tried jsfiddle.net/0frr7qn2/2.. but not working — Sindhu
the fiddle doesn't link the jqueryui library, is not formatted as per the API, and contains conflicting code from one of the answers below. jsfiddle.net/midnight_sun/0frr7qn2/3 — Steve0
jsfiddle.net/0frr7qn2/4 working now.. but the color is not changing when the tabs are active.. — Sindhu

Bonttimo Bonttimo · Accepted Answer · 2018-01-15T23:10:37

Here is one of thousand solutions I took a longer route but hope it explains the functionality a little better.

Working jsFiddle: Fiddle

 $(document).ready(function () {
        //Hide all Tabs on laod
        $('.Tab').hide();

        //Check which tab is active
        var activeOnLoad = $('.Tabs ul li.Active').attr("id");
        $('#'+activeOnLoad+'-content').show();

        //Handle click event
        $('.Tabs ul li').on('click', function(e){
            e.preventDefault();

          //Save clicked element to variable
           var clickedTab = $(this).attr("id");

          //Remove class from old tab
            $(this).parent().find('.Active').removeClass('Active');
          //Add Active class to clicked tab
            $(this).addClass('Active');

          //Hide all Tab elements
          $('.Tab').hide();

          //Show clicked Tab
          $('#'+clickedTab+'-content').show();
        });
    });

Update on OP's new code:

 $(document).ready(function () {
                //Hide all Tabs on laod
        $('.Tab').hide();

        //Check which tab is active
        var activeOnLoad = $('.Tabs ul li a.Active').attr("href");
        $(activeOnLoad).show();

        //Handle click event
        $('.Tabs ul li a').on('click', function(e){
            e.preventDefault();

          //Save clicked element to variable
          var clickedTab = $(this).attr("href");

          //Remove class from old tab
            $(this).parents('ul').find('.Active').removeClass('Active');
          //Add Active class to clicked tab
            $(this).addClass('Active');

          //Hide all Tab elements
          $('.Tab').hide();

          //Show clicked Tab
          $(clickedTab).show();
        });
    });

jsFiddle: jsFiddle

JQuery tabs displaying previous tab content

2 Answers