title: mouseover and mouseout in accordion
body: <p>I am using the accordion for navigation and i am using jquery. My problem is that when the page loads all the headers should be closed by default, when i mouseover any  header its siblings will open,when i mouseout its automatically closes.</p>
  
  <pre><code>&lt;ul id="accordion"&gt;
      &lt;li&gt;
          &lt;a href="#" class="history_heading" rel="history_heading"&gt;HISTORY&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link One&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Two&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Three&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Four&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Five&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  
      &lt;li&gt;
          &lt;a href="#" class="geography_heading" rel="geography_heading"&gt;GEOGRAPHY&lt;/a&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link One&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Two&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Three&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Four&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#"&gt;Link Five&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Please help me<br>
  The jquery code which is given below is for the click function but i want as per my requirements<br>
  <strong>jquery code</strong></p>
  
  <pre><code>$(document).ready(function () {
  
      $('#accordion li').children('ul').hide();
      $('.history_heading').parent().addClass('active').find('ul').show();
  
      $('#accordion a').click(function () {
  
          $(this).parent().siblings('.active').removeClass('active').find('ul').slideUp('fast');
  
          if ($(this).parent().hasClass('active')) {
              $(this).next('ul').slideUp('fast');
              $(this).parent().removeClass('active');
          } else {
              $(this).next('ul').slideDown('fast');
              $(this).parent().addClass('active');
          }
  
      });
  
  
  
  
  });
  </code></pre>