jQuery Accordion

Question

Just wondering if anyone can provide some basic advice on an accordion I'm trying to simplify. Got a working version, but it seems way overly complex. Here is my new JS.

   $(document).ready(function() {
     $("#themes li ul").hide();
     $("#themes li").hover(function() {
       $("ul").show();
         }, function() {
         $("li ul").hide();
   });

The markup looks like this:

<ul>
  <li>Tier 1
    <ul>
      <li>Tier 2</li>
      <li>Tier 2</li>
    </ul>
  </li>
  <li>Tier 1
    <ul>
      <li>Tier 2</li>
      <li>Tier 2</li>
    </ul>
   </li>
</ul>

My script works alright. But it shows all of the child ul's when any parent li is hovered, and it hides all the child ul's when unhovered. Just not sure how I can get it to A.) Only .show the li > ul when that specific li is hovered. And B.) Hide the shown li > ul only when another one is hovered (not itself). Example + explanation would be especially helpful! Thanks!!

Answer 1

why dont you use Jquery UI Accordion. and if you want your code to run on click like regular accordion then use click event not hover event

Answer 2

Why can't you use the JQuery UI Accordion. This will solve your problem. The js is and the html is very simple here

<div id="accordion">
    <h3><a href="#">First header</a></h3>
    <div>First content</div>
    <h3><a href="#">Second header</a></h3>
    <div>Second content</div>
</div>

jQuery(document).ready(function(){
    $('#accordion').accordion();
});

EDITED

The issue with your code is it hides and displays all the 'ul' components inside any 'li' components on hover of any one li. Here is the code to solve this issue, this will hide/show the 'ul' which comes inside the current 'li'

            $(document).ready(function() {
             $("#themes li ul").hide();
             $("#themes li").hover(function() {

               $(this).find("ul").show();
                 }, function() {
                 $(this).find("ul").hide();
           });
          });