Accordion on touch devices

[femkreations]

I created an accordion that needs to work on touch devices. Currently, when one (closed) header is touched/clicked, it opens up the contents while closing another open one. The issue I have is, when an open accordion is touched, it does a weird jump and opens and closes the content. I am having trouble understanding what is causing this weird behavior. Any suggestions or thought highly appreciated? This is only on touch devices-ipad/iphone. Here is a sample page I created. http://femkreations.com/blog/projects/navigation-for-tablet/index.php#dropdowns

Thanks in advance.
FP

[Shikkediel]

Cannot test on such a device myself but the code look quite comprehensible. I do see the jump (left to right) when using dev tools by the way (must be CSS rather than jQuery, I think).

A general guess – moving the e.preventDefault(); line (up or down and) out of the if statement. Since it’s a link, iMerch probably triggers both a touchstart and a click on the ‘else’ part.

$(document).ready(function () {

$(".facetParent > a").on("mousedown touchstart", function(e) {

    if (!$(this).hasClass("active")) {

    // hide any open menus and remove all other classes
    $(".facetParent div").slideUp(300);
    $(".facetParent a").removeClass("active");

    // open our new menu and add the open class
    $(this).next("div").slideDown(300);
    $(this).addClass("active");
    }

    else if ($(this).hasClass("active")) {
    $(this).removeClass("active");
    $(this).next("div").slideUp(300);
    }
    e.preventDefault();
});

Edit – the jump must be the scrollbar that appears sometimes…

[Author]

Posts