title: How Do I Stop Text From Moving When Using .slideToggle?
body: <p>My text is moving while using slide.Toggle. The very last sentence in the preview shifts when toggling. If I put a p element at the end of the preview then it doesn't do this but the downside is it creates a return that I don't want. I want the sentence to continue on where it should.</p>
  
  <p>Script</p>
  
  <pre><code>&lt;script type="text/javascript"&gt;
  jQuery(document).ready(function() {
  jQuery(".content").hide();
  //toggle the componenet with class msg_body
  jQuery(".heading").click(function()
  {
  jQuery(this).next(".content").slideToggle(1000);
  });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div class="layer1"&gt;
  
  &lt;span class="heading"&gt;During the most violent shocks of the Typhoon, the man at the Pequod's jaw-bone tiller had several times been reelingly hurled to the deck by its spasmodic motions, even though preventer tackles had been attached to it—for they were slack—because some play to the tiller was indispensable.&lt;/span&gt;
  
  &lt;span class="content"&gt;In a severe gale like this, while the ship is but a tossed shuttlecock to the blast, it is by no means uncommon to see the needles in the compasses, at intervals, go round and round. It was thus with the Pequod's; at almost every shock the helmsman had not failed to notice the whirling velocity with which they revolved upon the cards; it is a sight that hardly anyone can behold without some sort of unwonted emotion.&lt;/span&gt;&lt;/div&gt; 
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.layer1 {
  margin: 20px;
  padding: 0;
  color: #bfbfbf;
  font-family: Georgia, "Times New Roman", Times, serif;
  font-size: 1em;
  line-height: 1.2em;
  /* [disabled]text-align: justify; */
  }
  
  .heading {
  cursor: pointer;
  text-align: left;
  }
  
  .content {
  padding: 0px;
  margin: 0px;
  clear: both;
  text-align: left;
  } 
  </code></pre>
  
  <p>Thanks for any help.</p>