title: JQuery doesn't have sliding effects (show, slideToggle...)
body: <p>I'm new in Jquery, so sorry about the trivial question, but I'm quite stuck. This JQuery code should do some sliding effect (reveal part of HTML code and hide the three dots, with particular effect). Problem is, that it shows the HTML code between <code>&lt;span class="toggle"&gt;&lt;/span&gt;</code> WITHOUT sliding effect (whatever it is show() or slideToggle(), without or with parameters - slow,fast...). However, when I tried it for the first time, it went good, but after some refreshes it stopped animate. I can't find any obvious problem. Why this behaviour (independently on browser) ?</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;a href="#" class="toggle-button"&gt; ...&lt;/a&gt;&lt;span class=\"toggle\"&gt;blablabla1&lt;/span&gt;
  &lt;a href="#" class="toggle-button"&gt; ...&lt;/a&gt;&lt;span class=\"toggle\"&gt;blablabla2&lt;/span&gt;
  </code></pre>
  
  <p>JQUERY</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('.toggle').hide();
  $('.toggle-button').click(function(e){
      e.preventDefault();
      $(this).next().slideToggle();
      $(this).hide();
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>JQuery is appended in the BODY tag after my HTML code. I'm using this JQuery library:</p>
  
  <pre><code>&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Thanks.</p>