Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 877
  • 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

Featured Post

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

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