title: Show/Hide text using jquery
body: <p>Basically I have 6 buttons and 6 paragraphs (each one button relating to a specific paragraph). I want to show a paragraph of text when a certain button is clicked, and then hide that paragraph when the button is clicked again.</p>
  
  <p>I have looked through similar questions but cannot seem to get it to work. I think its because I have only started trying to use jquery and dont really understand the problem. All hep would be appreciated! thanks!</p>
  
  <p>html:</p>
  
  <pre><code>     &lt;div class="button"&gt;&lt;div class="button float_l"&gt;&lt;a href="#"&gt;More..&lt;/a&gt;&lt;/div&gt;
       &lt;div class="button"&gt;&lt;div class="button float_l"&gt;&lt;a href="#"&gt;More..&lt;/a&gt;&lt;/div&gt;
       &lt;div class="button"&gt;&lt;div class="button float_l"&gt;&lt;a href="#"&gt;More..&lt;/a&gt;&lt;/div&gt;   
  
  
          &lt;p&gt;&lt;div id="text1"&gt;Paragraph 1&lt;/div&gt;&lt;/p&gt;
  
          &lt;p&gt;&lt;div id="text2"&gt;Paragraph 2&lt;/div&gt;&lt;/p&gt;
  
          &lt;p&gt;&lt;div id="text3"&gt;Paragraph 3&lt;/div&gt;&lt;/p&gt;
  </code></pre>
  
  <p>javascript:</p>
  
  <pre><code>     $(document).ready(function () {
  
       $("#text1").hide();
       $(".button").click(function(){
       $("#text1").toggle();
  
       $("#text2").hide();
       $(".button").click(function(){
       $("#text1").toggle();
  
       });
  </code></pre>
  
  <p>the first button should relate to the first paragraph and so on. Iv tried using the 'this' function to relate to a specific button but must be using it incorrectly because it dosent work.</p>