Fancy FAQs with jQuery Sliders

It jumps a little at the end of the transition when you expand the answer div, can you use easing or similar to improve this?

I’m sure I had a similar issue with jumping on a clients site once, I fixed it with fixed height container ( in this example) but with variable length faq answers its not ideal.

I’d put it in a DL if I was you, but nice simple tutorial, and I’d make only one visibile at the time maybe ?

Use padding instead of margin on the P’s and see if that works (that’s what your Moo version does). Although the preferred hack is to only use .slideToggle stuff on element which don’t have margin or padding (and put the padding on things inside of that.

Also, all the jQuery people out there always go OMG??!! you used the $(this) selector more than ONCE in a function, you should cache that with $el = $(this) and then use the cached version. So:

OMG??!! you used the $(this) selector more than ONCE in a function, you should cache that with $el = $(this) and then use the cached version.

It’s not really smooth, i like spry accordion tabs more.

well done,but only one things: “$(this)['slide' + (state ? 'remove' : 'add') + 'Class'](‘active’); ” gave me an error.

@David Walsh: It’s all because of height. If you set the height of each P tag, that won’t happen. Something like $(‘p’).each(function(){ $(this).height($(this).height()) }); should fix.

@Mohamed Jama: Me too. It’s more semantic.

@David Walsh: this is the error:
$(this)["slide" + (state ? "remove" : "add") + "Class"] is not a function

@http://davidwalsh.name/dw-content/fancy-faqs-jquery.php?version=effect (line 122)

Nice post…

I would have used / elements though – the html would have been more semantically correct…

lol, oops – let’s clarify that :) dd and dt elements would have been more semantically correct…

Putting a whole bunch of /’s in might be therapeutic to some, but kinda pointless to most :)

Nice effect, and the height bug is annoying; however isn’t this reinventing the wheel somewhat… jQueryui has the accordion plugin already.

Just a thought.

Hey David. A couple simple things I would change.

First, the jumping bug: Add `position:relative` to your `#faqs` div, and it will start working as you expect.

Second, use `slideToggle` and `toggleClass` instead of the (clever) ternary operator stuff. Most of the `toggle` type functions in jQuery take an optional boolean to specify which to run.

state = !state;
answer.slideToggle( state );
tis.toggleClass( ‘active’, state );

In google chrome dev edition.. version 5.0.317.2 the HTML code does not show in your example html/code blocks.

Also, make sure you apply display:"none" to the inner divs. That will get rid of the jump while the page is loading, then set it back to display:"block" with jQuery after you set the height to zero.

Example:

$(".answer").css({ height:0, display: "block"});

You can also wrap the inner html in the answer div with another div and give the new div the padding.

Check this screencast out: http://jqueryfordesigners.com/slidedown-animation-jump-revisited/ It solves all your problems.

Regardless, you have a great blog man! It is basically carved in my RSS reader.

Cheers,

hmmmm I prefer the mootools effect

Hi, maybe you can fix the problem with div height this way (sometimes it works)

$(‘#faq div’).each(function() {$(this).height($(this).height()); });

Hi, maybe you can fix the problem with div height this way (sometimes it works)

$(‘#faq div’).each(function() {$(this).hide().height($(this).height()); });

Why even have a MooTools version? Surely jQuery is so much better for everything?! /troll

That margin jump in jQuery is particularly annoying here. Firefox 3.6.

It even happens on the jQuery homepage demo D:

@Darkimmortal It does indeed! I contacted Ralph Whitbek about it, and he opened this ticket: http://dev.jquery.com/ticket/6078 It should be fixed at some point soon.

@Douglas Neiner: It’s all fixed.

@Ralph Whitbeck: nope, it’s still here :)

@Zy @Ralph Whitbek Its fixed for me in Safari 4 and Firefox 3.5 (whereas it was broken before with the jump) Caching maybe?

@Zy It’s fixed on the jQuery homepage, but still broken on this demo.

This is very a good tutorial. Thanks for posting! By the way there is a problem with the height as some people posted before, but other than that its pretty good.

Nice! jQuery is a great framework, it’s cross browser compatible and lends itself to progressive enhancement very well!

Nicely done. I didn’t experience any issue with the height.

The fix for jQuery’s animation jump can be found on jQuery for designers: http://jqueryfordesigners.com/slidedown-animation-jump-revisited

It worked for me on a previous project.

Great stuff – I’m building my site as we speak and this will definitely be included in it – I was just checking your pages and BooM dunk. Anyhow, I have a question for ya. When I was selecting tutorial to copy it and read it later (off-line) I noticed that on copied text or whatever you select – your cute LOGO shows up – that probably takes you somewhere to “explain selected field” if I understand correctly coz I couldn’t open that page (maybe it’s a bug problem). I was thinkin CAN YOU PLEASE GAVE US TUTORIAL ON THAT TRICK???? Please

Great stuff – I’m building my site as we speak and this will definitely be included in it – I was just checking your pages and BooM dunk. Anyhow, I have a question for ya. When I was selecting tutorial to copy it and read it later (off-line) I noticed that on copied text or whatever you select – your cute LOGO shows up – that probably takes you somewhere to “explain selected field” if I understand correctly coz I couldn’t open that page (maybe it’s a bug problem).

I was thinking – CAN YOU PLEASE GAVE US TUTORIAL ON THAT TRICK???? Please and thanks a lot for great stuff as always!

@David Walsh: this happen when you slide on a tag with padding or margin. to avoid this you must add a tag. put your p insde a div, slide the div and margin/padding on the p

O ;) nice – lol – sorry. Can you repeat that but in plain English so i could understand something. Please understand. Thanks@Geler:

Here is my stab at FAQs.

I used definition list for markup

http://ranjandatta.com/jquery/dlToggle/

Hey, David,

Any objection to me using the jQuery to showcase another way to use it? I’ll of course give you credit for it. All I did was play with the CSS to see how it could be used as another tool and came up with something potentially handy. Objections? If you could email me, I’d appreciate it, so I can know whether to write up the post & demo on my site.

Cheers ;)

Fred

Hey, David,

Well, I posted it anyway: http://www.skyrocketlabs.com/articles/jquery-social-dropdown-menu.php

Thanks for the inspiration!

thanks guys, both of ypu. great designers:)

thans guys anyway, at least some of you could tell me “I don’t know “or anything, but anyhow thanks for good lesson learned.

Thanks again David, you nailed it. I am adding a photo gallery and text togglers to one page of a site, the javascripts weren’t cooperating with each other. Once again I turned to your blog for a jQuery alternative and found a better version than what I was using originally. Thanks.

Love it! Exactly what I wanted… and great for my meager skill level. Thanks!

Ummm… do we know why we can click the white space to the right of the links and have them open? It would be great if that would not be a link over there.

Any thoughts?

Thanks for the fast reply David. Awesome!

I shoulda thought of that block vs. inline thing!

Things stopped working when I did as you suggested… but I am sure I did it too fast. Going to work on it again tomorrow when I have time again. Thanks so much.

Is there any way to make the window scroll to the top of the clicked element? I modified your mootools version to do it on an old site and I was looking to change it to jquery. With mootools I added this:

onComplete:function(){
var target = el;
if (!this.wrapper['offset' + this.layout.capitalize()] == 0) new Fx.Scroll(window).toElement(target);
}

How would you do that with jquery?

Is there a way to get rid of not only the white space that is clickable, as Kenn asked about, but everything “to the right”. If you append background color or a frame to the div (or add another div around each Q) this will expand to be as wide as the screen. I want it to behave as a normal div where I can set a min-width and then let it expand depending on the with of the objects in the div. Is there a way to do this?

Hey just wanted to know if I can link to a specific FAQ from an email and have that particular FAQ be expanded when page loads? is there anything I can put on the link to tell the script open this FAQ?

Thanks guys

Thanks for this. I am using the Elegant code, but why does it jump? Also, in IE8, the h4 tag collapses so there is no spacing after clicking on one of the questions.

http://www.onlinemathgrade12345.teachmewell.com/faq.asp