Question

I’ve got a <ul> with 5 <li> items. Each list item has a headline and a paragraph. I’m using slideToggle() to display the paragraph when you click the headline.

But, when you click the headline a second time the slideToggle() hides the paragraph but adds some white space to the <li>. The more I click the headline to toggle the paragraph, the more white space appears.

The jQuery:

$(document).ready(function(){
        $('#content ul li h3').click(function(){
            $(this).next('p').slideToggle('fast');
        }) 
    });

My CSS:

#content ul li p {
            display:none;
        }

My HTML:

<div id="content"> 
  <ul class="faq">
        <li>
            <h3>Headline</h3>
            <p>Paragraph Text<br>More text...</p>
        </li>
  </ul>
</div>

Answer 1

Here was the trouble..

In my Global style sheet I had .faq li { display:inline; }

Once I removed this everything worked exactly as it should.