CODEWITHSUNDEEP
javascriptjquery
Webbly Brown
Webbly Brown

Reputation: 1002

Unable to get Jquery Tabs to work as wanted

I have a page with a tabbed layout, the way I want it to work is this:

When the page loads, there is a default start panel.

When you click on a tab it loads the panel related content and obviously hides the start panel. If you click the same tab again it hides the related to it and shows you the start panel again.

So I am toggling the start panel in essence. Eg Click Tab 1, Panel 1 shows, Click Tab 1 Again, Start Panel shows. Click Tab 2, Tab 2 shows, Click Tab 3 that shows, but click tab 3 again, start shows..

I have written some javascript using Jquery, It will toggle the tabs fine individually, but if for example I open the panel for Tab 1, then click Tab 2, it of course loads the start panel rather than the desired Tab 2 panel.

Here is my code but I just can't get the logic right.

// when start tab is toggled visible hide all step panels
function showStartPageOnly() {
    if ( $('#start').is(':visible') ) {
        $('.table').addClass('hidden');
    }
    else {
        $('.table').removeClass('hidden');
    }
}

$(document).ready(function () {
    // Stepped Panels
    // Toggle start page when tab clicked
    $( ".tab" ).click(function() {
        $( "#start" ).toggle();
        showStartPageOnly();
    });
});

I have created a JSFiddle with the full HTML and JS here: https://jsfiddle.net/rzuq5qbh/3/

Please can someone advice on the correct logic to obtain the results required?

Upvotes: 1

Views: 76

Answers (1)

Matej Đaković
Matej Đaković

Reputation: 880

If i understand you, you just need tab navigation like this in my case.

JSFiddle: here.

HTML:

<div class="tabs-triggers">
    <div class="tab-trigger open" rel="tab1">Tab Title 1</div>
    <div class="tab-trigger" rel="tab2">Tab Title 2</div>
    <div class="tab-trigger" rel="tab3">Tab Title 3</div>
    <div class="tab-trigger" rel="tab4">Tab Title 4</div>
</div>
<div class="tab-contents">
    <div id="tab1" class="tab-content open">Lorem 1</div>
    <div id="tab2" class="tab-content">Lorem 2</div>
    <div id="tab3" class="tab-content">Lorem 3</div>
    <div id="tab4" class="tab-content">Lorem 4</div>
</div>

CSS: 

.tabs-triggers {
    display: block;
}
.tabs-triggers::after {
    content:"";
    display: block;
    clear: both;
}
.tab-trigger {
    float: left;
    padding: 10px;
}
.tab-trigger.open {
    background: #ddd;
}
.tabs-contents {
    width: 100%;
    clear: both;
}
.tabs-contents::after {
    content:"";
    display: block;
    clear: both;
}
.tab-content {
    width: 100%;
    clear: both;
    display: none;
    padding: 10px;
    background: #ddd;
}
.tab-content.open {
    display: block;
}

JS:

jQuery(document).ready(function(){
    jQuery('.tab-trigger').on('click', function(){
        var thisRel = jQuery(this).attr('rel');
        if(jQuery(this).hasClass('open')){
            jQuery('.tab-trigger').removeClass('open');
            jQuery('.tab-content').removeClass('open');
            jQuery('#start').addClass('open');
        }else{
            jQuery('.tab-trigger').removeClass('open');
            jQuery(this).addClass('open');

            jQuery('.tab-content').removeClass('open');
            jQuery('#'+thisRel).addClass('open');
        }
    });
});

With this solution you can hide/show or chose active on define default tab on open site by class(in this case class open). Good luck! :)

Upvotes: 2

Related Questions