• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 932
  • 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">
    $(document).ready(function(){
      $("#accordion h2").click(function(e){
          $(this).find('.pane').slideToggle();
      });
    });
  </script>

Open in new window


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

Open in new window


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

Thanks
0
niceoneishere
Asked:
niceoneishere
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.

http://jsfiddle.net/LEUX6/

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

http://jsfiddle.net/L6Hpt/
0
 
niceoneishereAuthor Commented:
Thanks
0
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

Cloud Class® Course: Microsoft Office 2010

This course will introduce you to the interfaces and features of Microsoft Office 2010 Word, Excel, PowerPoint, Outlook, and Access. You will learn about the features that are shared between all products in the Office suite, as well as the new features that are product specific.

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