title: Make JavaScript/jQuery tabs return to position on mouse out
body: <p>This post is about the 3 green tabs at the top of the page (link is below). I have almost got these moving tabs how I want them, but I am not able to get the tabs to return to original position on mouse out or on a click elsewhere. Instead they move back to position after a set amount of time. How difficult is it to have them move back on mouse out?</p>
  
  <p>Site is here <a href="http://theveganproject.ca/wp/" rel="nofollow">http://theveganproject.ca/wp/</a></p>
  
  <p>Thanks!</p>
  
  <pre><code>var sliding = 0;
  var slideTime = '';
  
  // Set is sliding value
  function setSliding(a_ISliding){
  sliding = a_ISliding;
  }
  
  // Get is sliding value
  function getSliding(){
  return sliding;
  }
  
  // Carry out accordian styled effect
  function accordion(evt) {
  el = Event.element(evt);
  var eldown = getNextSibling(el);
  
  //  If element is visible do nothing
  if ($('visible') == el) {
          return;
  }
  if ($('visible')) {
  
          if( getSliding() == 1 ){
                  return false;
          }
  
          var elup = getNextSibling($('visible'));
  
          setSliding( 1 );
  
          parellelSlide( elup, eldown );
          $('visible').id = '';
  
  }
  else{
          setSliding( 1 );
          singleSlide( eldown );
  }
  
  el.id = 'visible';
  }
  
  
  // Setup accordian initial state
  function init() {
  
      var bodyPanels = document.getElementsByClassName('panel_body');
      var panels = document.getElementsByClassName('panel');
      var noPanels = panels.length;
      var percentageWidth = 100 / noPanels;
      var position = 0;
  
      //  Loop through body panels and panels applying required styles and adding      event listeners
  for (i = 0; i &lt; bodyPanels.length; i++) {
          bodyPanels[i].hide();
          panels[i].style.width = percentageWidth + '%';
          panels[i].style.position = 'absolute';
          panels[i].style.left = position + '%';
  
          Event.observe(panels[i].getElementsByTagName('h3')[0], 'mouseover', accordion, false);
          Event.observe(panels[i].getElementsByTagName('h3')[0], 'mousemove', accordion, false);
          Event.observe(document.body, 'mousemove', resetIdle, false);
  
          position += percentageWidth;
  }
  
      if( $('visible') ){
      //  Set panel with id of visible to be initial displayed
          var vis = $('visible').parentNode.id+'-body';
          $(vis).show();
      }
      setIdle();
  }
  
  // Next sibling method to work around firefox issues
  function getNextSibling(startBrother){
  var endBrother=startBrother.nextSibling;
    while(endBrother.nodeType!=1){
      endBrother = endBrother.nextSibling;
    }
    return endBrother;
  }
  
  function parellelSlide( elup, eldown ){
      new Effect.Parallel(
      [
              new Effect.SlideUp(elup),
              new Effect.SlideDown(eldown)
      ], {
              duration: 0.3,
              afterFinish: function() { setSliding( 0 );}
      });
  }
  
  function singleSlide( eldown ){
  
      new Effect.Parallel(
      [
              new Effect.SlideDown(eldown)
      ], {
              duration: 0.3,
              afterFinish: function() { setSliding( 0 );}
      });
  }
  
  function resetTabs(){
  
  var resetEl = getNextSibling( $('visible') );
  
  setSliding( 1 );
  
  new Effect.Parallel(
  [
          new Effect.SlideUp( resetEl )
  ], {
          duration: 0.3,
          afterFinish: function() { setSliding( 0 );}
  });
  
  $('visible').id = '';
  }
  
  function resetIdle(){
      if( $('visible') ){
              window.clearTimeout( slideTime );
              slideTime = window.setTimeout( "resetTabs()", 1000 );
      }
  }
  
  function setIdle(){
  if( $('visible') ){
      slideTime = window.setTimeout( "resetTabs()", 1000 );
  }
     }
  
      Event.observe(window, 'load', init, false);
  </code></pre>