Accordion effect doesn't work on mobile

[harry_ord]

Hello

This is my page:

http://www.armonisencia.cl/site/puntos-de-venta/

As you can see, below each "region" you have a gruopu of tabs that when you clik on any of them, they  will show you a hidden div. The problem is that when i'm watching the page on my home, only the first tab of each group works and the others don't respond when i push them. What i'm doing wrong?

Here's the code:

 

<script>
var accItem = document.getElementsByClassName('accordionItem');
    var accHD = document.getElementsByClassName('accordionItemHeading');
    for (i = 0; i < accHD.length; i++) {
        accHD[i].addEventListener('click', toggleItem, false);
    }
    function toggleItem() {
        var itemClass = this.parentNode.className;
        for (i = 0; i < accItem.length; i++) {
            accItem[i].className = 'accordionItem close';
        }
        if (itemClass == 'accordionItem close') {
            this.parentNode.className = 'accordionItem open';
        }
    }
</script>

 

Edited November 3, 2017 by harry_ord

[Ingolme]

Your floated elements are getting in front of all the other buttons, blocking the clicks from getting to them.

This is the issue:

.et_pb_column {
    float: left;
    position: relative;
    background-position: center;
    background-size: cover;
}

On mobile devices, aside from setting width to 100% (or better, "auto"), you also have to set float to "none".

[harry_ord]

@media (max-width: 600px)
{
.et_pb_column {
    float: none;
    position: relative;
    background-position: center;
    background-size: cover;
    width: 100%;
}


}

It doesn't work.

[dsonesuk]

Validate and you will see why, you have elements enclosing other elements they should not surround, because a required closing tag is not provided, the browser will try to add one to a position what it thinks is correct. Always validate before posting.

https://validator.w3.org/nu/?showsource=yes&doc=http%3A%2F%2Fwww.armonisencia.cl%2Fsite%2Fpuntos-de-venta%2F#l594c398

I was wondering why the h6, p elements surrounded all the google map area.

Edited November 4, 2017 by dsonesuk