title: Checking toggle state?
body: <p>I have the following code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
      &lt;head&gt; 
          &lt;title&gt;&lt;/title&gt; 
          &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt;
  
          &lt;script type="text/javascript" language="javascript"&gt; 
              $(document).ready(function() {
                  $("#widget_list").hide();
  
                  $("#click_me").click(function() {
                      $(this).parents( "#clipboard" ).find( "#widget_list" ).toggle();
                  });
              });
          &lt;/script&gt;
      &lt;/head&gt; 
      &lt;body&gt; 
         &lt;div id="clipboard"&gt;
  
             &lt;div href="#" id="click_me" style="border:solid 1px black;text-align:center;cursor:pointer;"&gt;
                  \/
             &lt;/div&gt;
  
             &lt;div id="widget_list" style="border:solid 1px black;text-align:center;"&gt;
                  some stuff here
             &lt;/div&gt;
  
         &lt;/div&gt;
  
         some other stuff here
  
      &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>
  
  <p><a href="http://jsfiddle.net/QFTsb/" rel="nofollow">jsFiddle demo</a>.</p>
  
  <p>Instead of hard coding the text <code>some stuff here</code> into <code>#widget_list</code>.  How do I add that text to <code>#widget_list</code>, when it's toggle state is visible and how do I remove that text from <code>#widget_list</code> when it's toggle state is hidden?</p>