[jQuery] Re: Slide toggle trigger to swap images depending on show hide state

[somnamblst]

And the answer is..

All credit goes to wizzud for the answer

<style type="text/css">
#wrap {
       margin-left:0px;
       margin-right:auto;
       width: 910px;
}
#top h1 {
   display: block;
   background: url("image_910x40.jpg") no-repeat left top;
       height: 40px;
       width: 910px;
       margin: 0px;
       padding: 0px;
}

#slidebar {
       background: #000000 url(image_910x200.jpg') no-repeat left top;
       padding: 0px;
       height: 200px;
       width: 910px;
}

#slidebartrigger {
       background: #ffcc99 url("replay.gif") no-repeat right top;
       display: block;
       padding: 0px;
       height: 14px;
}
#slidebartrigger.closeSlide {
       background: #0033ff url("close.gif") no-repeat right top;
       display: block;
       padding: 0px;
       height: 14px;
}
/* this is purely so that replay.gif isn't showing during during the
initial slideDown...*/
#slidebartrigger.firstSlide {
       background: #ff3333 url("blank.gif") no-repeat right top;
       display: block;
       padding: 0px;
       height: 14px;
}

       </style>

       <script type='text/javascript'>
$(document).ready(function(){


 var slideTimeout // timer
  , sbTrigger = $('#slidebartrigger') // convenience
  , sbFirstSlide = true // indicates first time through
  ;
 function toggleSlideboxes(){

  if(slideTimeout) clearTimeout(slideTimeout);

  var isDown = sbTrigger.is('.closeSlide');

  $('#slidebar')['slide' + (isDown ? 'Up' : 'Down')]((isDown ? 3000 :
1000), function(){

      if(sbFirstSlide){ sbTrigger.removeClass('firstSlide');
sbFirstSlide
= false; }

      sbTrigger[(isDown ? 'remove' : 'add') +
'Class']('closeSlide').one('click', toggleSlideboxes);

      if(!isDown) slideTimeout = setTimeout(toggleSlideboxes, 4000);
    });
 }
 toggleSlideboxes();
});
</script>


               <div id="wrap">
                               <div id="top"><h1></h1>
                               </div>

                               <div id="slidebar" style="height:
200px;display:none;">
                               </div>

                               <div id="slidebartrigger"
class="firstSlide"></div>
                       </div>