title: How to make my Hidden Paragraph sit still when it is shown
body: <p>I set up some jQuery to show a hidden paragraph when the "read more" text is clicked.
  However, when the text is shown, it wan't to jump up to the place where the text was that commands it to be shown.</p>
  
  <p>Here's how it's set up. I have an h4 that has text that says "read more" then when it's clicked, it has a paragraph with a fadeIn effect, and the h4 has a fadeOut effect.</p>
  
  <p>How do I make the paragraph stop jumping up to take the position of where the h4 was?
  I tried setting the paragraph in a div with a fixed position, but that caused my jQuery to not work, and then I tried to set the paragraph to have a fixed position but that doesn't work either. I even set the margin-top, but still no go.</p>
  
  <p>here is my HTML:</p>
  
  <pre><code>    &lt;div id="expanding_letter"&gt;
      &lt;h4&gt;Read More&lt;/h4&gt;
  
      &lt;p&gt;text text text stuff to say etc blah bla blah lorme ipsum doler set amet....
      &lt;/p&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>my CSS</p>
  
  <pre><code>    #expanding_letter {
  font-size:1.5em; 
  color: #9d9d9d; 
  height: 37px; 
  line-height: 37px;  
      }
  
      #expanding_letter h4 {
  color: #666; 
  cursor: pointer; 
  height: 37px; 
  line-height: 37px;  
      }
  
      #expanding_letter p {
  color: #666; 
  height: 37px; 
  line-height: 37px;
  margin-top: 100px;
      }
  
      #expanding_letter .expanded div { 
      }
  
      #faqs .expanded { 
  color:#666;
      }
  
      #expandedParagraph {
  position: fixed;
      }
  </code></pre>
  
  <p>and the jQuery:</p>
  
  <pre><code>    $(function() {
      $("#expanding_letter p").hide();
      $("#expanding_letter h4").click(function () {
      $(this).next("#expanding_letter p").fadeIn(1000);
      $(this).fadeOut(1000);
      });
      });
  </code></pre>
  
  <p>Thanks for taking a look!</p>