Different Accordion Designs for your website

An Accordion is a menu which is vertically stacked list of headings that can be clicked to reveal or hide content associated with them. It is one of many ways you can expose content to users in a progressive manner. Accordion are used to show FAQs, sometime sidebar menu items. Using accordion is useful when you have short details that can hidden but are also important to be kept in the page for providing information.

In this article I am sharing how I created 5 different designs of Accordion. I will be sharing what are the things that are required to make Accordion and how you can implement and use them in your website or blog.

Additional things that are required are

Accordion designs

Design 1 (Simple and Normal Accordion)

This design is simple and easy. Just add the heading and the summary.

Design 2 (Accordion with Animated Up-Down Symbol)

A replica design of the above but with addition of animated up-down symbol

Design 3 (Bootstrap Like Accordion)

This design is similar to the Bootstrap Accordion, but uses no bootstrap. Having plus (+) and minus (-) symbol on opening and closing of the summary.

Design 4 (Opaque Stylish Accordion)

Accordion design with some style, having opaque background(Transparent), giving an awesome feel.

Design 5 (Colorful Accordion)

This design is having colorful right borders. Colors can changed as per the choice. This colorful design is going to be really interactive and attract the user.

Here is the working example of all the designs:

See the Pen 5 different Accordion Designs by bishal-biswas (@bishal-biswas) on CodePen.

Customize Options

If you want to do any changes, you are free to do. Here is some quick customizable options explained:

Change width

If you want to change the width of the accordion, you simply manipulate in css. See the example:

Enable Only Show one Summary at a time

If you want multiple summaries to be opened simultaneously then remove this code from the JS file.

Animation CSS

For animation of Up-down symbol and Plus-Minus replace, the code which is used is:

If you like this article, please do share this with your friends and colleagues, and if you require any suggestions, do let me know in the comments.