title: Accordion navigation open and close on mouseover/mouseleave jQuery
body: <p>I'm using the jQuery accordion plugin and I need help with my accordion menu, the menu displays submenu links on <code>mouseover</code> but closes the main links only after hover on another main link. I want the sub links to show when I hover the mouse over but also to hide after moving the mouse out of the main link.<br />
  I would appreciate your help. See code below:</p>
  <p>Here is the HTML</p>
  <pre><code>    &lt;head&gt;
      &lt;title&gt;Accordion Test&lt;/title&gt;
      
      &lt;link rel=&quot;stylesheet&quot; href=&quot;accordionDemo.css&quot; /&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;../lib/jquery.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;../lib/chili-1.7.pack.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;../lib/jquery.easing.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;../lib/jquery.dimensions.js&quot;&gt;&lt;/script&gt;
      &lt;script type=&quot;text/javascript&quot; src=&quot;../jquery.accordion.js&quot;&gt;&lt;/script&gt;
  
      &lt;script type=&quot;text/javascript&quot;&gt;
      jQuery().ready(function(){
          // simple accordion with mouseover event
          jQuery('#navigation').accordion({
              active: false,
              header: '.head',
              navigation: true,
              event: 'mouseover',
              fillSpace: true,
              animated: 'easeslide'
          });
      });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div id=&quot;wrapper&quot;&gt;
      
  
  
  &lt;div id=&quot;navBar&quot;&gt;
              &lt;ul id=&quot;navigation&quot;&gt;
                  &lt;li&gt;
                      &lt;a class=&quot;head&quot; href=&quot;?p=1&quot;&gt;About SfT&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.1&quot;&gt;sub1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.2&quot;&gt;sub2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.3&quot;&gt;sub3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.1&quot;&gt;sub4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.2&quot;&gt;sub4.1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.3&quot;&gt;sub4.2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.4&quot;&gt;sub4.3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.5&quot;&gt;sub5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt; 
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class=&quot;head&quot; href=&quot;?p=1.2&quot;&gt;Your Life&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.2.1&quot;&gt;sub1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.2.2&quot;&gt;sub2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.2.3&quot;&gt;sub3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.2.4&quot;&gt;sub4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.2.5&quot;&gt;sub5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt; 
                  &lt;/li&gt;
                  &lt;li&gt;
                      &lt;a class=&quot;head&quot; href=&quot;?p=1.3&quot;&gt;Your Health&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=accordionTest2.html&quot;&gt;sub1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.3.3&quot;&gt;sub2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.3.4&quot;&gt;sub3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.3.5&quot;&gt;sub4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.3.6&quot;&gt;sub5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt; 
                  &lt;/li&gt;
                                  &lt;li&gt;
                      &lt;a class=&quot;head&quot; href=&quot;?p=1.3&quot;&gt;Your Call&lt;/a&gt;
                      &lt;ul&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.1&quot;&gt;sub1&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.2&quot;&gt;sub2&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.3&quot;&gt;sub3&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.4&quot;&gt;sub4&lt;/a&gt;&lt;/li&gt;
                          &lt;li&gt;&lt;a href=&quot;?p=1.4.5&quot;&gt;sub5&lt;/a&gt;&lt;/li&gt;
                      &lt;/ul&gt; 
                  &lt;/li&gt;
  
              &lt;/ul&gt;
          &lt;/div&gt;
      &lt;/div&gt; &lt;!--end wrapper--&gt;   
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>This is the CSS:</p>
  <pre><code>    * { margin: 0; padding: 0; }
  body { margin: 0; padding: 0; font-size: small; color: #333 }
  
      
  
  
  #wrapper {
      width:600px;
      margin:0 auto;
      padding-top:100px;
      }
  
  #navBar { 
      height:380px;
      margin-bottom:1em;
  }
  
  #navigation {
      margin:0px;
      padding:0px;
      text-indent:0px;
      /*background-color:#EFEFEF;  sublists background color */
      width:200px;
  }
  #navigation a.head { /* list header */
      height: 40px;
      cursor:pointer;
      background: url(collapsed.gif) no-repeat scroll 3px 4px; /* list header bg color and img settings */
      color:#999;
      display:block;
      font-weight:bold;
      font-size: 22px;
      margin:0px;
      padding:0px;
      text-indent:20px;
      text-decoration: none;
  }
  #navigation a.head:hover {
      color:#900;
  }
  #navigation a.selected {
      background-image: url(expanded.gif);
      color:#900;
  }
  #navigation a.current {
      color: #F60;;
      font-weight:bold;
  }
  #navigation ul {
      margin:0px;
      padding:0px;
      text-indent:0px;
  }
  #navigation li {
      list-style:none outside none; 
      /*display:inline;*/
      padding:5px 0 5px 0;
  }
  #navigation li li a {
      color:#000000;
      display:block;
      font-size:16px;
      text-indent:20px;
      text-decoration: none;
  }
  #navigation li li a:hover { /* sublist hover state bg and color */
      color:#F60;;
      font-weight:bold;
  }
  </code></pre>
  <p>And this is the accordion plugin code:</p>
  <pre><code>    /*
   * jQuery UI Accordion 1.6
   * 
   * Copyright (c) 2007 Jörn Zaefferer
   *
   * http://docs.jquery.com/UI/Accordion
   *
   * Dual licensed under the MIT and GPL licenses:
   *   http://www.opensource.org/licenses/mit-license.php
   *   http://www.gnu.org/licenses/gpl.html
   *
   * Revision: $Id: jquery.accordion.js 4876 2008-03-08 11:49:04Z joern.zaefferer $
   *
   */
  
  ;(function($) {
      
  // If the UI scope is not available, add it
  $.ui = $.ui || {};
  
  $.fn.extend({
      accordion: function(options, data) {
          var args = Array.prototype.slice.call(arguments, 1);
  
          return this.each(function() {
              if (typeof options == &quot;string&quot;) {
                  var accordion = $.data(this, &quot;ui-accordion&quot;);
                  accordion[options].apply(accordion, args);
              // INIT with optional options
              } else if (!$(this).is(&quot;.ui-accordion&quot;))
                  $.data(this, &quot;ui-accordion&quot;, new $.ui.accordion(this, options));
          });
      },
      // deprecated, use accordion(&quot;activate&quot;, index) instead
      activate: function(index) {
          return this.accordion(&quot;activate&quot;, index);
      }
  });
  
  $.ui.accordion = function(container, options) {
      
      // setup configuration
      this.options = options = $.extend({}, $.ui.accordion.defaults, options);
      this.element = container;
      
      $(container).addClass(&quot;ui-accordion&quot;);
      
      if ( options.navigation ) {
          var current = $(container).find(&quot;a&quot;).filter(options.navigationFilter);
          if ( current.length ) {
              if ( current.filter(options.header).length ) {
                  options.active = current;
              } else {
                  options.active = current.parent().parent().prev();
                  current.addClass(&quot;current&quot;);
              }
          }
      }
      
      // calculate active if not specified, using the first header
      options.headers = $(container).find(options.header);
      options.active = findActive(options.headers, options.active);
  
      if ( options.fillSpace ) {
          var maxHeight = $(container).parent().height();
          options.headers.each(function() {
              maxHeight -= $(this).outerHeight();
          });
          var maxPadding = 0;
          options.headers.next().each(function() {
              maxPadding = Math.max(maxPadding, $(this).innerHeight() - $(this).height());
          }).height(maxHeight - maxPadding);
      } else if ( options.autoheight ) {
          var maxHeight = 0;
          options.headers.next().each(function() {
              maxHeight = Math.max(maxHeight, $(this).outerHeight());
          }).height(maxHeight);
      }
  
      options.headers
          .not(options.active || &quot;&quot;)
          .next()
          .hide();
      options.active.parent().andSelf().addClass(options.selectedClass);
      
      if (options.event)
          $(container).bind((options.event) + &quot;.ui-accordion&quot;, clickHandler);
  };
  
  $.ui.accordion.prototype = {
      activate: function(index) {
          // call clickHandler with custom event
          clickHandler.call(this.element, {
              target: findActive( this.options.headers, index )[0]
          });
      },
      
      enable: function() {
          this.options.disabled = false;
      },
      disable: function() {
          this.options.disabled = true;
      },
      destroy: function() {
          this.options.headers.next().css(&quot;display&quot;, &quot;&quot;);
          if ( this.options.fillSpace || this.options.autoheight ) {
              this.options.headers.next().css(&quot;height&quot;, &quot;&quot;);
          }
          $.removeData(this.element, &quot;ui-accordion&quot;);
          $(this.element).removeClass(&quot;ui-accordion&quot;).unbind(&quot;.ui-accordion&quot;);
      }
  }
  
  function scopeCallback(callback, scope) {
      return function() {
          return callback.apply(scope, arguments);
      };
  }
  
  function completed(cancel) {
      // if removed while animated data can be empty
      if (!$.data(this, &quot;ui-accordion&quot;))
          return;
      var instance = $.data(this, &quot;ui-accordion&quot;);
      var options = instance.options;
      options.running = cancel ? 0 : --options.running;
      if ( options.running )
          return;
      if ( options.clearStyle ) {
          options.toShow.add(options.toHide).css({
              height: &quot;&quot;,
              overflow: &quot;&quot;
          });
      }
      $(this).triggerHandler(&quot;change.ui-accordion&quot;, [options.data], options.change);
  }
  
  function toggle(toShow, toHide, data, clickedActive, down) {
      var options = $.data(this, &quot;ui-accordion&quot;).options;
      options.toShow = toShow;
      options.toHide = toHide;
      options.data = data;
      var complete = scopeCallback(completed, this);
      
      // count elements to animate
      options.running = toHide.size() == 0 ? toShow.size() : toHide.size();
      
      if ( options.animated ) {
          if ( !options.alwaysOpen &amp;&amp; clickedActive ) {
              $.ui.accordion.animations[options.animated]({
                  toShow: jQuery([]),
                  toHide: toHide,
                  complete: complete,
                  down: down,
                  autoheight: options.autoheight
              });
          } else {
              $.ui.accordion.animations[options.animated]({
                  toShow: toShow,
                  toHide: toHide,
                  complete: complete,
                  down: down,
                  autoheight: options.autoheight
              });
          }
      } else {
          if ( !options.alwaysOpen &amp;&amp; clickedActive ) {
              toShow.toggle();
          } else {
              toHide.hide();
              toShow.show();
          }
          complete(true);
      }
  }
  
  function clickHandler(event) {
      var options = $.data(this, &quot;ui-accordion&quot;).options;
      if (options.disabled)
          return false;
      
      // called only when using activate(false) to close all parts programmatically
      if ( !event.target &amp;&amp; !options.alwaysOpen ) {
          options.active.parent().andSelf().toggleClass(options.selectedClass);
          var toHide = options.active.next(),
              data = {
                  instance: this,
                  options: options,
                  newHeader: jQuery([]),
                  oldHeader: options.active,
                  newContent: jQuery([]),
                  oldContent: toHide
              },
              toShow = options.active = $([]);
          toggle.call(this, toShow, toHide, data );
          return false;
      }
      // get the click target
      var clicked = $(event.target);
      
      // due to the event delegation model, we have to check if one
      // of the parent elements is our actual header, and find that
      if ( clicked.parents(options.header).length )
          while ( !clicked.is(options.header) )
              clicked = clicked.parent();
      
      var clickedActive = clicked[0] == options.active[0];
      
      // if animations are still active, or the active header is the target, ignore click
      if (options.running || (options.alwaysOpen &amp;&amp; clickedActive))
          return false;
      if (!clicked.is(options.header))
          return;
  
      // switch classes
      options.active.parent().andSelf().toggleClass(options.selectedClass);
      if ( !clickedActive ) {
          clicked.parent().andSelf().addClass(options.selectedClass);
      }
  
      // find elements to show and hide
      var toShow = clicked.next(),
          toHide = options.active.next(),
          //data = [clicked, options.active, toShow, toHide],
          data = {
              instance: this,
              options: options,
              newHeader: clicked,
              oldHeader: options.active,
              newContent: toShow,
              oldContent: toHide
          },
          down = options.headers.index( options.active[0] ) &gt; options.headers.index( clicked[0] );
      
      options.active = clickedActive ? $([]) : clicked;
      toggle.call(this, toShow, toHide, data, clickedActive, down );
  
      return false;
  };
  
  function findActive(headers, selector) {
      return selector != undefined
          ? typeof selector == &quot;number&quot;
              ? headers.filter(&quot;:eq(&quot; + selector + &quot;)&quot;)
              : headers.not(headers.not(selector))
          : selector === false
              ? $([])
              : headers.filter(&quot;:eq(0)&quot;);
  }
  
  $.extend($.ui.accordion, {
      defaults: {
          selectedClass: &quot;selected&quot;,
          alwaysOpen: true,
          animated: 'slide',
          event: &quot;click&quot;,
          header: &quot;a&quot;,
          autoheight: true,
          running: 0,
          navigationFilter: function() {
              return this.href.toLowerCase() == location.href.toLowerCase();
          }
      },
      animations: {
          slide: function(options, additions) {
              options = $.extend({
                  easing: &quot;swing&quot;,
                  duration: 300
              }, options, additions);
              if ( !options.toHide.size() ) {
                  options.toShow.animate({height: &quot;show&quot;}, options);
                  return;
              }
              var hideHeight = options.toHide.height(),
                  showHeight = options.toShow.height(),
                  difference = showHeight / hideHeight;
              options.toShow.css({ height: 0, overflow: 'hidden' }).show();
              options.toHide.filter(&quot;:hidden&quot;).each(options.complete).end().filter(&quot;:visible&quot;).animate({height:&quot;hide&quot;},{
                  step: function(now) {
                      var current = (hideHeight - now) * difference;
                      if ($.browser.msie || $.browser.opera) {
                          current = Math.ceil(current);
                      }
                      options.toShow.height( current );
                  },
                  duration: options.duration,
                  easing: options.easing,
                  complete: function() {
                      if ( !options.autoheight ) {
                          options.toShow.css(&quot;height&quot;, &quot;auto&quot;);
                      }
                      options.complete();
                  }
              });
          },
          bounceslide: function(options) {
              this.slide(options, {
                  easing: options.down ? &quot;bounceout&quot; : &quot;swing&quot;,
                  duration: options.down ? 1000 : 200
              });
          },
          easeslide: function(options) {
              this.slide(options, {
                  easing: &quot;easeinout&quot;,
                  duration: 700
              })
          }
      }
  });
  
  })(jQuery);
  </code></pre>