Flashy FAQs Using MooTools Sliders

Discussion

1. keif

   I’ve had this discussion prior in regards to FAQs, accordions and real world scenarios, and it’s broken down like this:

   It doesn’t work very well (in the user perspective). I seldom see FAQs that have short, succinct answers – there’s always one that takes up too much room, and the scrolling gets annoying (especially when there are multiple “answers” like this).

   I’ll try to find an example of what I think qualifies as “good” stylized FAQs.
2. David

   Two things i think that are improvements

   – developing : instead of using rel and id to identify the question-answer pair you could use a dl list where in the dt element is the question and in the dd element the answer. if you don’t want to use the dl tags you could use a hx tag for the question and a div or p tag for the answer. Let javascript identify the next element when clicking on or hovering over the question

   – visual : instead of clicking you could use hovering over the answer as a trigger. It is easier on the clicking finger.
3. david

   @David: I wouldn’t recommend using hover for the effect — I would see that getting really annoying. I used DIVs because they’re highly configurable and it’s something everyone uses already. Thank you for posting!
4. Mark

   I am going to implement this on one of my sites right away. Great timing! :)
5. David

   True it would get annoying if the hover effect kicks in when the cursor enters the question area. If you work with a few seconds delay I think it would not get annoying.

   I think you are adding more than necessary using divs. The class, id and rel attributes fatten up html only to add some javascript effect.
6. Adam

   Might also note that the js is using MooTools 1.2 (beta). 1.1 doesn’t seem to work – at least for me.
7. david

   @Adam: Correct, this is Moo 1.2. To make it work in 1.1, you simply need to change “el.set” to “el.setStyle” and “el.get” to “el.getAttribute”
8. Mike

   One thing that drives me crazy is that, as far as I can tell, you can’t use block-level elements inside those divs that you’re sliding. I’ve been working on something like this for a site where the sliding content includes <ul> and <p> tags… in IE 7, it refuses to slide!

   It was easy enough to work around the p tags but I’m still trying to find a good alternative to the uls… by setting their style to display: inline I’m able to get this to work in IE 7 but the formatting in that case isn’t desirable.

   So, let this be a warning for people… afaik, you may not be able to use <ul>, <p>, and other block-level tags in your sliders if you want them to work in IE!
9. EVula

   I recently did up an FAQ using the accordion trick. In my opinion, in works better (though this is an excellent tutorial; please don’t think I’m slamming the lesson, David!).

   Specifically, I handled it as a definition list, as different-David mentioned; that allows for the multiple block-level tags that Mike mentions above (just a single dd tag with however many paragraph tags as you need; the script borked on multiple dd tags in the same grouping), and is very forgiving of very lengthy answers (which partly addresses keif’s concerns). And because the dt tag is block-level itself, it greatly increases the clicking area without having to manually change its display or width or anything like that.

   It also degrades very, very gracefully if the user turns off JavaScript.
10. steffy

    Greetings David,

    I’m trying to use your dam cool script for a faq part too, it works very good but since some of the answers are quite long I would like to add a close button at the end of the slided part. I have tried, without success to implement some stuff in the js like a

    $('faq_close').addEvent('click', function(e){
            e.stop();
            askaproSlide.slideOut();
        });

    where I put a close link within a span with the class of faq_close

    but no chance

    would you have a tip for a dummy like me, thank you in advance

    Steffy
11. Matt

    I have a quick question… excuse me if this is at a very noobie level but I just wanted to know what the double $$ <– means? or what is it telling it to do?

    Also where did you get the el in this section –> .each(function(el) is that something you just made up to give it a unique identifier?

    Thanks!
12. Matt

    Guys,

    I’m having trouble with the questions being hidden upon entering the page in IE… works fine in firefox. Any suggestions?

    Is anyone having this same problem?
13. Matt

    Okay Okay… I found out what the $$ does and means… please excuse that question.

    But still having trouble with IE7 and the faq’s working correctly.
14. laura

    This is great, thanks!

    One question though — the “slide” action is really jerky and jumpy in Firefox, but nice and smooth in IE. Any ideas?
15. Matt

    still having trouble with IE7 and the faq’s working correctly.
16. jay

    Hi…

    thanks for your brillant snippets, but this code is not xhtml. you are not allowed to set a
    “rel” into a div tag. “rel” is only allowed for

    Jay
17. Alex

    Hi all.
    This is just what I’m looking for, but it doesn’t seem to work with the mootools 1.2.3 version I’m using (including the v1.2.3-more.js file). Has there been a small change in syntax since the version referenced on this page?

    Cheers!
18. Paul

    Hi,
    I’ve added an faq to this site, not from your tutorial but from the mootools website, and everything works fine except the link to an outside website that I have in one of the answers. Any idea how this can be resolved?

    Your help would be much appreciated.

    Regards

    Paul