Need an accordion layout for your website? Think simple.

Many businesses choose to add a FAQs page to their website as a place to keep all the answers to the questions that they get asked again and again by their users. “What’s the business’s phone number?” “What are your hours of operation?” “How can I schedule your service?”

Displaying all the frequently asked questions and answers at once would take up a ton of space and require excessive scrolling for the user. Not to mention how hard it might be for them to pinpoint their exact question in that mess of information. Furthermore, the user likely doesn’t need or want to see the answer to every question any given client might ask. They only want to see the answers to the specific question they have at the moment.

If only there were some way to only display the questions and reveal the appropriate answer only when a user clicks on the question they are looking for. This is exactly what an accordion plug-in does. In fact, jQuery and javascript offer many options for creating this type of layout.

However, when doing a Google search for the code that will create the accordion layout, you’re bound to end up more confused than when you began. There are only two options that are commonly presented.

The first are jQuery snippets that are far too complex for the task they are trying to accomplish. What if you want to customize the layout more than this coder did? You’re going to have to spend up to a few hours arduously trying to understand their pretentious and overly complex code before you can make your change.

The second option that you’ll commonly see is to download a plugin from the jQuery site or from some coder’s github. Often the documentation for these plug-ins is poorly organized and confusing. These plugins also often force you to use their predefined markup which is again overly complex and could make site maintenance difficult in the future. Lastly, these plugins normally download to a folder of way too many files and make you spend the time you could be working on something else attaching these files appropriately in your html document.

So after considering all these options, here’s what I’d say we need; accordion code that is simple to understand, allows you to define your own markup, makes style customization simple, and does not require you to download any files from the web. I can get ya there in as little as 10 lines of jQuery.

We’re going to need a parent container for all the questions and answers and two div containers per question and answer pair. Here I have chosen to use:

<div class="accordion-container">
    <div class="question">
        How can I save time creating my accordion layout?
    </div>
    <div class="answer">
        By simplifying your jQuery.
    </div>
</div>

Then our jQuery…

$('.answer').hide();

$('.question').click(function() {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).next('.answer').slideUp();
    } else {
        $(this).addClass('open');
        $(this).next('.answer').slideDown();
    }
});

We’ll also throw a few styles on there to make it look more interesting.

.question {
    border-bottom: 2px solid white;
    background-color: #f9a61c;
    color: white;
    padding: 10px;
}
.answer {
    border-bottom: 2px solid white;
    background-color: #e28d02;
    color: white;
    padding: 10px;
}

This generates: (Click to test)

How can I save time creating my accordion layout?
By simplifying your jQuery.

Let’s talk customization. For the sake of a real world example let’s add two more question/answer pairs and let’s also add some open/closed stylings to make the accordion tabs more usable while we’re at it:

<div class="accordion-container">
    <div class="question">
        How can I save time creating my accordion layout?
    </div>
    <div class="answer">
        By simplifying your jQuery.
    </div>
    <div class="question">
        How can I save time creating my accordion layout?
    </div>
    <div class="answer">
        By simplifying your jQuery.
    </div>
    <div class="question">
        How can I save time creating my accordion layout?
    </div>
    <div class="answer">
        By simplifying your jQuery.
    </div>
</div>
.question {
    position: relative;
    border-bottom: 2px solid white;
    background-color: #f9a61c;
    color: white;
    padding: 10px;
    position: relative;
}
.question:before {
    content: '+';
    top: 50%;
    -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
            transform: translateY(-50%);
    right: 10px;
}
.question.open:before {
    content: '-';
}
How can I save time creating my accordion layout?
By simplifying your jQuery.
How can I save time creating my accordion layout?
By simplifying your jQuery.
How can I save time creating my accordion layout?
By simplifying your jQuery.

Don’t wanna call those divs “question” and “answer”? No need. You could call them “foo” and “bar”. Makes no difference. You don’t have to download external files and you can customize the CSS all you want.

There’s just on more option I’ll suggest. As the accordion is now, any number of accordion tabs can be open at one time. On a very busy or cluttered page, you may want the user to be able to see only one answer at a time so that the page and layout stay clean and simple. Just a few jQuery changes and you’re there:

$('.answer').hide();

$('.question').click(function() {
    if ($(this).hasClass('open')) {
        $(this).removeClass('open');
        $(this).next('.answer').slideUp();
    } else {
    *** $('.question').removeClass('open');
        $(this).addClass('open');
    *** $('.answer').slideUp();
        $(this).next('.answer').slideDown();
    }
});   
How can I save time creating my accordion layout?
By simplifying your jQuery.
How can I save time creating my accordion layout?
By simplifying your jQuery.
How can I save time creating my accordion layout?
By simplifying your jQuery.

HOW CAN WE HELP

Tell us a bit about you and a team member will be in touch ASAP.


ALMOST DONE!

I’m interested in discussing...

Some of our Clients

Acceptance Insurance
Crystal Geyser
Nikon Logo
Tandem Diabetes Care