Almost all websites contain a CSS accordion in at least one of their pages, particularly if they have a FAQ section. CSS accordion is an exceptional web design feature for its show/hide functionality. These accordion boxes hide a text or information by default and reveal them if requested. Thanks to its practical design, accordions generally serve as patterns for menus, lists, images, excerpts, snippets, and even videos.
This article created by our team behind Slider Revolution will also introduce you to a selection of free CSS accordion designs. If you need a solid grasp on accordions, this article is for you.
But first, what is an accordion?
An accordion is a set of either horizontally or vertically stacked interactive headings that display and hide collapsible panels, each panel containing a section of the content. These headings may be in the form of a title, a thumbnail characterizing the section of content, or a content snippet. Accordions make ideal design patterns for featuring multiple sections of content without scrolling excessively through the page.
When working with accordions, you always have to keep these two fundamental terms in mind, the accordion header, and the accordion panel. The accordion header is an interactive label or thumbnail that reveals and hides the accordion panel, which is a collapsible panel that contains the section of content.
Some accordions include additional elements in the accordion header to optimize function and improve the visual design such as menu buttons, icons, or snippets of the hidden content.
There are several ways to create a CSS accordion but there are two main approaches, one that uses hidden form elements and one that uses CSS pseudo-selectors, and here are some methods that apply these approaches.
The Radio Button Method
The radio button method enables users to include a hidden radio input type and a label tag to each tab of the accordion. The logic behind this method is comparable to the manner of filling up a form. When users select a tab in the accordion, they also check the radio button added to it. The same reasoning also applies to the other tabs. In this method, however, users can only open one tab at a time.
The Checkbox Method
The checkbox method also applies the same principle as the radio button method but it enables users to include a checkbox input type instead. When users select a tab in the accordion, they also check the corresponding checkbox.
Unlike the radio button method, the checkbox method allows users to open multiple tabs at the same time, in a way that is similar to ticking several checkboxes in a form.
The :target Method
CSS :target selector is an example of CSS3 pseudo-selector that allows users to link an HTML element or a target element to an anchor tag.
Once the anchor tag is clicked, the :target pseudo-selector however, changes the URL format, affecting the browser history. This is the drawback of the :target method. The back button of the browser will lead the users back to the previous state of the accordion instead of the previous web page.
The :hover Method
If you don’t want such changes to your browser behavior, you may use the :hover CSS pseudo-selector instead. The :hover CSS pseudo-selector allows users to style and select elements when the pointer or cursor hovers over them. This method is ideal for creating image galleries.
To make it work, you must first consider the layout of the tabs, then you can either hide elements or reduce their height or width properties.
The Best Open Source CSS Accordion Examples
By Wesley van Wyk
Most websites rarely use horizontal accordions, but this type of accordion makes an effective design component for displaying images, Q&A, and presenting guidelines. Horizontal accordions also function as an onboarding feature or a simple in-page information box.
This animated accordion allows you to get creative with pure CSS3. It uses a rotation transition when clicking on tabs.
CSS Accordion: Checkbox Hack
By Jon Yablonski
The CSS logic behind this fixed height checkbox accordion is similar to the radio button case, with the input type changed from radio to checkbox.
By Matthew Scott
This accordion was developed by Matthew Scott using HTML and SCSS. It offers to create a pure CSS accordion with a CSS transition on the panel height. Simply change the “height” into “max-height” when animating the height property of the accordion panel.
Bootstrap Accordion FAQ
By John Fink
This simple yet functional accordion was developed by John Fink via Bootstrap. This accordion makes an ideal design component for the website’s FAQ section, and it can also be utilized for other purposes.
The color of the text is black by default. It has a white background color for the answers, and light grey for the questions. Its color combination and thin border-style give the entire component a sleek, minimalist look.
Accordion Image Gallery
By Stefan C.
This animated accordion is perfect for those who plan to creatively display images on their websites. The gallery enlarges an image when you hover over it.
Radio Inputs & Accordions 2
By Scott Earl
This radio accordion’s design is simple yet functional, which makes it easy to use on mobile devices. It has custom styled radio buttons that occupy an appropriate amount of space in the sliding menu.
This Bootstrap accordion menu was developed for dashboard navigation. The design directs users to the right pages.
Pure HTML and CSS Accordion
By Chris Ota
This expandable accordion was developed by Chris Ota using pure HTML and CSS. It utilizes a checkbox input to toggle the movement of each accordion panel, and it has a unique overall design.
Bootstrap Accordion With Search Query Reference Guide
By Chris Lane Jones
This advanced Bootstrap accordion features a search box that displays sections of content that contain the term being searched. The search query is located before the collapsible panels. It allows users to open multiple panels simultaneously.
CSS Accordion: Radio Button Hack
By Jon Yablonski
This CSS only accordion utilizes the radio button hack. It is written in Sass, a CSS pre-processor. You may view the consolidated CSS file by clicking the “View Compiled” button.
CSS3 Accordion Slider
By Tayfun B.
CSS :hover pseudo-selector allows you to use and control hover style effects. This pure CSS3 accordion is easy to set up, and it offers simple and custom animation effects that make a great slideshow component for a home page. It enables users to display images with descriptive text in every panel.
Full Width Accordion Slider
By Eze Rangel
Full Width accordion slider is a hybrid between an accordion and a pure CSS full width slide. It features vibrant colors and swift transitions that definitely would draw people’s attention.
By Evan Yamanishi
This Bootstrap accordion makes an ideal design component for displaying guides or chapters of an eBook. It opens only one tab at a time, and it allows users to include and animate additional elements such as icons.
By Frank Ali
As the name implies, this accordion allows you to open multiple tabs at the same time. It relies solely on CSS3, and it utilizes a checkbox input type which enables users to select and open multiple panels simultaneously.
Ending thoughts on these CSS accordion designs
Accordions enable users to create and display collapsible content. Its show/hide functionality helps save spaces in web pages and also improves user experience.
This article has provided you an extensive list of open-source CSS accordions that are guaranteed to optimize your website. We hope that this article has also provided you with useful information to get a solid grasp of CSS accordions.
If you enjoyed reading this article about CSS accordion designs, you should read these as well:
- CSS Input Text Code to Use in Your Own Forms
- The Best CSS Gallery Code Snippets To Use Yourself
- CSS and HTML calendar examples
- HTML and CSS timeline snippets