Jump to content
harry_ord

Accordion effect doesn't work on mobile

Recommended Posts

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 by harry_ord

Share this post


Link to post
Share on other sites

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".

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×