Jump to content

Accordion works on iPhone, not on iPad?


Ronnico
 Share

Recommended Posts

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

XcQfW3F.png

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 by Funce
Link to comment
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
 Share

×
×
  • Create New...