jQuery Custom Accordion - Ausgabe Closing aktuellen offenen Abschnitt

Question

Ich habe eine JS Fiddle zur Verfügung gestellt, aber es ist zielgerichtet auf mobile so für die Arbeit zu reduzieren Fensterbreite oder offene Konsole, aber das Problem ist;

Es öffnet die Standard-Registerkarte und ihre Inhalte fein, klicken Sie auf eine andere Registerkarte und es öffnet und scrollt nach unten. Das ist in Ordnung, aber es schließt nicht die vorherige Registerkarte und wenn ich zum Schließen klicke, werden alle geöffneten geschlossen und die Benutzerfreundlichkeit nicht perfekt.

Irgendwelche Ideen jemand? Der Teil in Frage, die ich denke, ist in dieser Funktion:

var tabClick = function(x) { 

Und denkt seine meine isOpen Bedingung, dass ich falsch

Fiddle tue: https://jsfiddle.net/6wttzcg5/5/

JS:

$(document).ready(function() { 

var originalTabs = $('.originalTabs').html(); 
var windowWidth = 0; 
var time = 500; 

function clearTabs() { 
    $('.originalTabs').html(originalTabs); 
} 

//clearTabs(); 
//desktopTabs(); 

function desktopTabs() { 
    clearTabs(); 

    // cretate tabs for desktop 
    var headers = $("#tab_description h6"); 

    $('#tab_description h6').each(function(i) { 
    $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>'); 
    }); 

    for (var i = 0; i < headers.length; i++) { 
    $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>'); 
    } 

    $('ul.tabs').each(function() { 
    var active, content, links = $(this).find('a'); 
    var listitem = $(this).find('li'); 
    active = listitem.first().addClass('active'); 
    content = $(active.attr('href')); 
    $('.tab').hide(); 
    $(this).find('a').click(function(e) { 
     $('.tab').hide(); 
     $('ul.tabs li').removeClass('active'); 
     content.hide(); 
     active = $(this); 
     content = $($(this).attr('href')); 
     active.parent().addClass('active'); 
     content.show(); 
     return false; 
    }); 
    }); 

    headers.remove(); // remove headers from description 
    $('#tab-0').show(); // show the first tab 
} 

function mobileTabs() { 
    clearTabs(); 

    //alert("loaded mobile"); 

    var headers = $("#tab_description h6"); 

    $(headers).each(function(i) { 
    $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>'); 
    //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>'); 
    $(this).on('click tap', function() { 
     tabClick($(this)); 
    }); 
    }); 

    $('#tab_description h6').first().addClass("active"); 
    $('#tab_description h6').first().nextUntil("h6").show(); 
} 

var tabClick = function(x) { 

    //alert("clicked"); 
    var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div'); 

    $('#tab_description h6').removeClass("active"); 
    if (!$(x).hasClass("active")) { 
    $(x).addClass("active"); 
    } 

    // Check if current accordion item is open 
    var isOpen = $(x).next().is(":visible"); 

    //console.log(x); 
    // Open accordion item if previously closed 
    if (!isOpen) { 
    $(x).nextUntil('h6').slideDown(time); 
    $(x).nextUntil(accordionContent).slideDown(time); 
    } else { 
    accordionContent.slideUp(time); 
    } 

    scrollToTab($(x)); 

} 

function scrollToTab(tabScrollTo){ 
    $("html, body").animate({ scrollTop: $(tabScrollTo).offset().top - 15 }, time); 
} 

//load default 
$(window).on("load",function(){ 

    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
    //alert("Mobile/Tablet (Portrait)"); 
    desktopTabs(); 
    //$('#tab_description h6').on("click, tap", tabClick); 

    //console.log(originalTabs); 
    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
    //alert("Mobile/Tablet (Portrait)"); 
    mobileTabs(); 
    //$('#tab_description h6').on("click, tap", tabClick); 

    } else if (isDesktop) { 
    //alert("Desktop"); 
    desktopTabs(); 
    } 
}); 

//bind to resize 
$(window).on("orientationchange resize",function(){ 

    if(windowWidth != $(window).width()){ 

    if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     desktopTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     mobileTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

    } else if (isDesktop) { 
     desktopTabs(); 
    } 

    windowWidth = $(window).width(); 
    delete windowWidth; 

    } 

}); 

}); 

Answer 1

Für Wer hier die Lösung kennen will ist:

Fiddle: https://jsfiddle.net/6wttzcg5/12/

JS:

$(document).ready(function() { 

    var originalTabs = $('.originalTabs').html(); 
    var windowWidth = 0; 
    var swapSpeed = 300; 
    var scrollSpeed = 200; 

    function clearTabs() { 
    $('.originalTabs').html(originalTabs); 
    } 

    //clearTabs(); 
    //desktopTabs(); 

    function desktopTabs() { 
    clearTabs(); 

    // cretate tabs for desktop 
    var headers = $("#tab_description h6"); 

    $('#tab_description h6').each(function(i) { 
     $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>'); 
    }); 

    for (var i = 0; i < headers.length; i++) { 
     $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>'); 
    } 

    $('ul.tabs').each(function() { 
     var active, content, links = $(this).find('a'); 
     var listitem = $(this).find('li'); 
     active = listitem.first().addClass('active'); 
     content = $(active.attr('href')); 
     $('.tab').hide(); 
     $(this).find('a').click(function(e) { 
     $('.tab').hide(); 
     $('ul.tabs li').removeClass('active'); 
     content.hide(); 
     active = $(this); 
     content = $($(this).attr('href')); 
     active.parent().addClass('active'); 
     content.show(); 
     return false; 
     }); 
    }); 

    headers.remove(); // remove headers from description 
    $('#tab-0').show(); // show the first tab 
    } 

    function mobileTabs() { 
    clearTabs(); 

    //alert("loaded mobile"); 

    var headers = $("#tab_description h6"); 

    $(headers).each(function(i) { 
     $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>'); 
     //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>'); 
     $(this).on('click tap', function() { 
     tabClick($(this)); 
     }); 
    }); 

    $('#tab_description h6').first().addClass("active"); 
    $('#tab_description h6').first().nextUntil("h6").show(); 
    } 

    var tabClick = function(x) { 

    //alert("clicked"); 
    var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div'); 

    //$('#tab_description h6').removeClass("active"); 
    if (!$(x).hasClass("active")) { 
     $(x).addClass("active"); 
    } 

    // Check if current accordion item is open 
    var isOpen = $(x).hasClass("active"); 

    //console.log(x); 
    // Open accordion item if previously closed 

    if (isOpen) { 
     $('#tab_description h6').removeClass("active"); 
     $(accordionContent).slideUp(swapSpeed); 
     $(x).addClass("active"); 
     $(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() { 
     scrollToTab($(x)); 
     }); 
    } 

    return false; 

    } 

    function scrollToTab(x) { 
    $("html, body").animate({ 
     scrollTop: $(x).offset().top - 10 
    }, scrollSpeed); 
    } 

    //load default 
    $(window).on("load", function() { 

    /*if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     //alert("Mobile/Tablet (Portrait)"); 
     desktopTabs(); 
     //$('#tab_description h6').on("click, tap", tabClick); 

     //console.log(originalTabs); 
    } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     //alert("Mobile/Tablet (Portrait)"); 
     mobileTabs(); 
     //$('#tab_description h6').on("click, tap", tabClick); 

    } else if (isDesktop) { 
     //alert("Desktop"); 
     desktopTabs(); 
    } */ 
    mobileTabs(); 
    }); 

    //bind to resize 
    $(window).on("orientationchange resize", function() { 

    if (windowWidth != $(window).width()) { 

     /*if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) { 
     desktopTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

     } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) { 
     mobileTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

     } else if (isDesktop) { 
     desktopTabs(); 
     } */ 

      mobileTabs(); 
     $('#tab_description h6').on("click tap", tabClick); 

     windowWidth = $(window).width(); 
     delete windowWidth; 

    } 

    }); 

});