jQuery Accordion FAQ

Frequently Asked Questions (FAQ) pages stink; they are ugly and it can be hard to simplify them. The only way I've seen is condensing the page to just as much information the user needs at once, then providing them with what they need. One way of doing this is hiding the answers until a user clicks a question and then sliding down the answer. I just made a WordPress plugin to create an accordion FAQ for your posts or pages, and it only took a few lines of jQuery. [faq title="Click me to see the script!"]

(function($) { 
    // more code using $ as alias to jQuery
    $('.simplefaq-item .question').click(function() {
    var parent = $(this).parent();
    parent.children("div").slideToggle();
    });
})(jQuery);

[/faq] Simple! .simplefaq-item wraps the question and answer. The answer is an anchor tag. When the anchor tag is clicked, the script finds the parent and then toggles the child div, aka the answer. Grab the script from GitHub: http://bit.ly/10a40yp

I'm available for one-on-one consulting calls – click here to book a meeting with me 🗓️

Want more? Sign up for my weekly newsletter