The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Accordion on touch devices

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #197912

    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.

    Thanks in advance.


    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
        else if ($(this).hasClass("active")) {

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

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.