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.

score 1 · Accepted Answer · answered Oct 30 '13 at 18:26

1

The glitch is 2-fold.

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

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

answered Oct 30 '13 at 18:26

jonsuh

2,875
1
18
23

Hmm you have a good eye, I didn't see it adding inline. I have one problem though, I can't use a `p` because it won't hide the `ul`, `ol`, or `table` I have inside of them. I originally had it as a `p` tag and it still works but that was my original problem of the glitch with a `p` tag. – Josh Powell Oct 30 '13 at 18:29
Alright the `margin: 0;` cleared up the slight glitch with a `p` tag but any idea on why the `p` tag won't hide any of the `ul`, `ol`, or `table`? – Josh Powell Oct 30 '13 at 18:32
If the toggle element won't work with a `p` tag try a `div` instead. A `div` also has a default display value of block. – jonsuh Oct 30 '13 at 18:33
I appreciate all of the help with this but after trying a few more options they are all glitching out. I think I am just going to scrap the idea and start another approach. – Josh Powell Oct 30 '13 at 18:37
The issue with the `table, ul, ol` would be that they would have to be a child (inside) of the parent `p` or `div` tag as opposed to being adjacent (next to). I think your approach was OK, just needed some fine tuning. – jonsuh Oct 30 '13 at 19:22
I figured out why the `p` was causing problems. Block elements like `ul` are not allowed inside of a `p` tag. I then decided to rewrite how I have the structure set up and here is the fiddle which seems to be working. http://jsfiddle.net/Josh_Powell/c8YbX/2/ This is the question I found out about `p` tags and `ul` tags: http://stackoverflow.com/questions/5681481/should-ol-ul-be-inside-p-or-outside – Josh Powell Oct 30 '13 at 19:26
Ah that makes sense too, didn't keep that into consideration. Cool, glad you got a working solution – jonsuh Oct 30 '13 at 19:51
Thank you for all the help and I am glad I got it working as well but now I need to convert 3 massive amounts of text into this format, yay me. :/ – Josh Powell Oct 30 '13 at 19:54

jQuery slidetoggle being glitchy

1 Answers1