jQuery slidetoggle being glitchy

Question

To start this off I will describe where I started. I first had a set up like this:

<div class="Q">
    <p><strong>What is an exchange?</strong></p>
    <p class="A">Text goes in here</p>
</div>

This was working okay in this fiddle but I have a few answers that contain a ul or table with information in it. The p would hide just fine but it would not hide the ul or table .

As I was writing this answer I decided to make the p class="A" into a span which now hides them but caused an even weirder problem. When you click on the question it will instantly display the content. Then when you click on it once again it will scroll like it should but does some weird fading glitch at the end.

Before I made it into a span it scrolled up and down just fine but it would slowly glitch at the end of scrolling it up.

The first 8 questions are currently set up as spans so you can see the odd effect I am getting. The questions after that show how the glitch happens when they are set as a p .

Here is the live site, click here.

HTML

<div class="Q">
    <p><strong>What is an exchange?</strong></p>
    <span class="A">Answer goes here</span>
</div>

CSS

/* Q and A Format */

.Q > p > strong {
  cursor: pointer;
  background: #c1c1c1;
  width: 100%;
  display: block;
}

.A {
  display: none;
}

jQuery

$('.Q ').on('click', function() { // Q and A function
    $(this).find('.A').stop(true).slideToggle(500);
});

I have used this function numerous times and I am a little puzzled by how it is behaving.

Answer 1

The glitch is 2-fold.

The styling of the <span> that is being toggled is set as display: inline when visible. Instead of a <span> use a <p> and that should fix your issue. (The default display property of a <span> is inline as opposed to a <p> which is block.)

Secondly, the <p> that the header text is in should have margin: 0 .