Ronnico Posted April 2, 2019 Share Posted April 2, 2019 Hi there, I’ve been trying to figure out why the accordion on this site works perfectly on desktop and iPhone, but not on an iPad. I need it to work on an iPad too, but to my surprise it doesn’t work. Must be over looking something. Both iPhone and iPad have the latest Os. Maybe something in the script, but I have no knowledge of that. I’ve been searching in a many places but couldn’t find answers unfortunately If someone could help it would be highly appreciated. Thanks! <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> .accordion { background-color: #eee; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; } .active, .accordion:hover { background-color: #ccc; } .panel { padding: 0 18px; display: none; background-color: white; overflow: hidden; } </style> </head> <body> <h2>Accordion</h2> <button class="accordion">Section 1</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 2</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <button class="accordion">Section 3</button> <div class="panel"> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> <script> var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc.addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); } </script> </body> Link to comment Share on other sites More sharing options...
Funce Posted April 3, 2019 Share Posted April 3, 2019 (edited) To make code easier to read, try using the codeblock function. It has highlighting so that we can see the important pieces. Try editing your post to include it. In terms of the question... The JS code you've posted produces a syntax error, you need to adjust it slightly so rather than assigning a click listener to the elementCollection, you can assign it to each element. Sounds big, just change this line. Add the [ i ] acc[i].addEventListener("click", function() { If this is the exact code that is running, there may be a chance that your iPad is running this JavaScript, while your phone and desktop is running a cached(and not broken) version. What browser are you using, Mozilla? Are you using a different browser on your iPad? Edited April 3, 2019 by Funce Link to comment Share on other sites More sharing options...
dsonesuk Posted April 3, 2019 Share Posted April 3, 2019 Because the op has not used the code button, any [ i ] (without spaces) is treated as formatting for italics, notice how it changes directly after where this is used from normal to italics. Link to comment Share on other sites More sharing options...
Funce Posted April 3, 2019 Share Posted April 3, 2019 Oops! Well that throws my theory out the window. Good catch. Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now