• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 896
  • Last Modified:

jQuery accordion click in mobile devices not working

I am trying to use the code below to provide accordion effect. But on the mobile devices it does not work. here is my code

   <script type="text/javascript">
      $("#accordion h2").click(function(e){

Open in new window

<div class="accordion-container">
<div id="accordion">
<h2 class="current">A</h2>
<div class="pane">Content A</div>
<div class="pane">Content B</div>
<div class="pane">Content B</div>
<div class="pane">Content B</div>
<div class="pane">Content E</div>

Open in new window

When I click on each letter nothing happens. what am I doing wrong?

1 Solution
Adrian CrabtreeCommented:
Hi niceoneishere,

The way the .find() function works is that it will find descendant elements of the parent element. In this case, the h2 does not have any descendant elements. In order to use the .find() function, you could wrap your h2 and div.pane in a content wrapper. If you check out the fiddle I created, it will illustrate this.

What happens is when you click the h2, the script will located the closest wrapping div.content, and then traverse down to find the nearest div.pane.


Alternatively, the way you have your markup set up, you could use the function .next(). You can check out this link to see that:

niceoneishereAuthor Commented:
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now