title: Change div text with jQuery Toggle
body: <p>When using <code>slideToggle</code>, how to change the Text close/show?
  I did a simple one, but cannot get the text change back.</p>
  
  <p>Here is what I did:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(document).ready(function(){
      $('.open').click(function(){        
              $('.showpanel').slideToggle('slow');
              $(this).text('close');
      });
      
          $('.open2').click(function(){        
              $('.showpanel2').slideToggle('slow');
              $(this).text('close');
      });        
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
  font-size:20px;
  }
  #box{
      border:2px solid #000;
      width:500px;
      min-height:300px;      
  }
  .open,.open2 {
      width:450px;
      height:50px;
      background:blue;
      margin:5px auto 0 auto;
      color:#fff;     
      }
  .showpanel,.showpanel2{
      width:450px;
      height:300px;
      margin:0 auto 10px auto;
      background:red;
      display:none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div id="box"&gt;
  
  &lt;div class="open"&gt;Show&lt;/div&gt;
  &lt;div class="showpanel"&gt;This is content&lt;/div&gt;
  
  &lt;div class="open2"&gt;Show&lt;/div&gt;
  &lt;div class="showpanel2"&gt;This is content&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="http://jsfiddle.net/9EFNK/" rel="noreferrer">http://jsfiddle.net/9EFNK/</a></p>