title: minimize and maximize the text using javascript
body: <p>I wrote the code for minimizing and maximizing the text when we click the symbol. I have tried the following:</p>
  
  <p>html code:</p>
  
  <pre><code>&lt;div style="font:12px verdana;background:#fefcd9;padding:10px 10px 10px 10px;border:solid 1px lightgray;" id="text"&gt;
  Instructions&lt;span id="min" style="cursor:pointer;float:right;"&gt;[+]&lt;/span&gt;&lt;span id="max" style="cursor:pointer;float:right;"&gt;[-]&lt;/span&gt;&lt;br/&gt;&lt;br/&gt;
  Perhaps you should look for someone who will dig deep to learn about you, your business, your services and products. A writer who will put herself in the shoes of your potential customers in order to answer these important questions:hhhhhhhh
  &lt;/div&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  $('#text').click(function(){
   $("#min").toggle(200);
      $("#max").toggle(200);
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>In the above the first div has to display "instructions" and the "[+]". When I click the "[+]" symbol it has to maximize the div and display all the remaining text. Also the [+] symbol has to be replaced with a [-] symbol, which will minimize the text. </p>
  
  <p>Can anyone help me?</p>