title: How to stop jQuery slidetoggle yo-yo?
body: <p>I am new to jQuery but this seems like it should work just fine:</p>
  
  <pre><code>$(document).ready(
      function()
      {
          $("#btn_toggle_transcript").click(
              function()
              {
                  $("#transcript_container").slideToggle(1000);
              }       
          );
      }
  );
  </code></pre>
  
  <p>...and it does work, but not correctly. ...at least, not as expected...</p>
  
  <p>Am I correct in assuming that the above code would add a click handler to the element with an ID of "btn_toggle_transcript"?  This click handler, then, would respond to the click by either opening the targetted div (...with the id of "transcript_container") if it is closed, or closing it if it is open?</p>
  
  <p>What is currently happening is this:  clicking the button does, indeed, make the div slide open.  BUT, when it is fully open, it IMMEDIATELY - and with no user input - slides closed again.</p>
  
  <p>I have seen a few forum posts suggesting the possible cause is the handler getting added twice.  However, if I comment out the above code, no action is taken when the button is clicked.  So, the handler is not getting added anywhere else...</p>
  
  <p>Can ANYONE please tell me why my div is yo-yoing closed by itself?</p>
  
  <p>The HTML for the button:</p>
  
  <pre><code>&lt;div id="tools_button_container"&gt;
      &lt;div class="tools_button" id="btn_toggle_transcript"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The HTML for the sliding div (content is set dynamically):</p>
  
  <pre><code>&lt;div id="transcript_container"&gt;
      &lt;div id="transcript_contents"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And the CSS:</p>
  
  <pre><code>#transcript_container{
  z-index:4;
  position:absolute;
  width:290px;
  max-height:455px;
  top:51px;
  right:-2px;
  background-color:#90B2D8;
  padding:20px 10px 10px 10px;
  border-bottom: 1px solid #000;
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  display:none;
  }
  
  #transcript_contents{
  max-height:375px;
  overflow:auto;
  margin:20px 0px 10px 0px;
  background-color:#ffffff;
  padding:0px 5px 0px 5px;
  }
  
  #btn_toggle_transcript {
  background: url('images/transcript.png') no-repeat 0 0;
  display:block;
  }
  
  #circle_btn_toggle_transcript:hover {
  background-position: 0px -50px;
  }
  </code></pre>
  
  <p>==========</p>
  
  <p>EDIT:</p>
  
  <p>I did three things that seem to have helped.  Why they worked, I do not know, but they do.</p>
  
  <p>1) Drupal 6.x uses an old version of jQuery (1.2.2).  There is a module to update to 1.3.2.  I replaced the 1.3.2 update files with the 1.7.1 files and now my DOM reports using v1.7.1 of jQuery.</p>
  
  <p>2) &amp; 3) Despite the fact that I only bind to the click event ONCE (verified by removing the binding and having no action invoked on a button click), I decided to try adding a line to remove my "phantom" binding before I add my actual binding.  Based on my reading, I have decided to use the now recommended on() and off() methods to add/remove the bindings.  My ready() function now looks like this:</p>
  
  <pre><code>$(document).ready(
  function(){
      $("body").off("click", "#btn_toggle_transcript");
      $("body").on("click", "#btn_toggle_transcript",
          function(){
              $("#transcript_container").slideToggle(1000);
          }
      );
  }
  );
  </code></pre>
  
  <p>Now, my sliding div opens and stays open until I toggle it closed again. Yay!</p>
  
  <p>A big thank you to all who answered/commented.  Your suggestions and guidance helped me get to a solution.</p>
  
  <p>Cheers!</p>
  
  <p>UPDATE:
  As I mentioned in one of the comments, this is running inside Drupal.  As also mentioned, if I commented out the single binding, no action was invoked.  My reasoning was that since the removal of ONE binding ceased to invoke the action, then there was no way it was being bound twice...</p>
  
  <p>DUMB!</p>
  
  <p>While I was correct that there was only one block of binding code, I completely forgot that my module was already adding my js file to the page.  Because I need to deploy my content in non-drupal environments as well, I was also manually adding the js file to my page.  ...two inclusions meant two bindings.  ...that's a few days I'll never get back!</p>