I've got a new navigation layout I'm trying to implement at this url:
http://www.50allstars.com/2016/05/grid-menu.html?m=1

It's not all done yet, but in my tests I've found this page to not work on an old un-unpdatable ipad of mine. I figure since not all people are internet-savvy, I'd best think of the worst case scenarios. So how can I ensure that all the hidden divs show when any particular label is pressed? Also, let me know if there are any other potential issues I might be overlooking.

PS I tried to add this script to a fiddle, but I couldn't figure it out. I suck at this stuff, and need any help you can offer. Maybe just view the code with your browser's console if you can. Thanks a ton.

My iPad is away at the moment so I can't test this. But there is something that I want to share here. I'm running into a lot of web makers that have such issues and I'm using caniuse.com a lot more often now.

It's a lot of work on some pages but if I have a suspect line I can see if I can use that on the target browser. Sometimes this site offers a workaround.

PS. Added with edit. W3C check follows. May want to see if you can reduce those errors.
https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.50allstars.com%2F2016%2F05%2Fgrid-menu.html%3Fm%3D1

I can't test the code since I am on Linux and using Firefox and Chrome. However my recommendation is that you use jquery functions in your javascript code since jquery is meant to abstract browser differences. Looking at your code you did include jquery library but are not using it. Also you could consider including latest version of jquery (either 2.2 or 1.12 if you need 1.x backward compatibility).

Other good tool for checking compatibility with any browser is Modernizr. You can use it to test whether a browser supports a feature you want to implement.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.