title: how can I do to use slideToggle between display:none and display:inline?
body: <p>I'm trying to use slideToggle() function to apply &quot;less and more&quot; behavior to a paragraph which contain a &quot;.more&quot; class:</p>
  <p>html code:</p>
  <pre><code>&lt;p class=&quot;more&quot;&gt;
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor  
      incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud 
      exercitation ullamco laboris nisi ut...
      &lt;span class=&quot;HiddenText&quot; style=&quot;display: none;&quot;&gt;
          aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in 
          voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint 
          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
          id est laborum.
      &lt;/span&gt;
      &lt;a class=&quot;readmore&quot; href=&quot;&quot; style=&quot;display: block;&quot;&gt;show more&lt;/a&gt;
  &lt;/p&gt;
  </code></pre>
  <p>here is my JS code:</p>
  <pre><code>$(document).ready(function() {    
          
      $('.readmore').click(function(){
  
          var text = $(this).text() == 'show more' ? 'show less' : 'show less';
          $(this).text(text);
  
          $(this).prev().slidetoggle(); 
          // here the problem 
          // $(this).prev() eq $('.hiddenText')
          // slideToglle transforme &quot;display:none&quot; property to &quot;display:inline-block&quot; 
  
          return false;
      });
  });
  </code></pre>
  <p>I apply the slideToggle function to span.hiddenText element, but this function transform &quot;display: none&quot; to &quot;display: inline-block&quot;, I want to toggle between &quot;display: none&quot; and  &quot;display: inline&quot;.</p>
  <p>onclick behavior : using slideToggle() function:</p>
  <pre><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
  aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </code></pre>
  <p>onclick behavior : using toggle() function:</p>
  <pre><code>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi utaliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </code></pre>
  <p>problem: slideToggle function create a return line in the paragraph.</p>
  <p>normally, since I used a span which the display property is an inline, slideToggle must use a display:inline instead of display:inline-block.</p>
  <p>Note: when I use toggle() in place of slideToggle() it work perfectly (display:none to display:inline)</p>
  <p>how can I do to use slideToggle between display:none and display:inline?</p>