Friday, 26 October, 2018 UTC
Summary
Content accordions make a useful design pattern. You can use them for many different things: for menus, lists, images, article excerpts, text snippets, and even videos
Most accordions out there rely on JavaScript, mainly on jQuery, but since the use of advanced CSS3 techniques became widespread, we can also find nice examples that only use HTML and CSS, that make them accessible in environments with disabled JavaScript.
Creating CSS-only accordions can be a tricky task, so in this post we will try to understand the main concepts developers use when they need to create one.
In creating CSS-only tabs there are usually two main approaches, each of them has two frequent use cases. The first approach utilizes hidden form elements, while the second one makes use of CSS pseudo-selectors.
1. The Radio Button Method
The Radio Button Method adds a hidden radio input and a corresponding label tag to each tab of the accordion. The logic is simple: when the user selects a tab, they basically check the radio button that belongs to that tab, the same way when they fill in a form. When they click on the next tab in the accordion, they select the next radio button, etc.
In this method, only one tab can be open at the same time. The logic of the HTML looks something
like this:
<div class="css-only-accordion"> <!-- One Tab Inside The Accordion --> <div> <input type="radio" name="tab-1" id="tab-1"> <label for="tab-1">Title of Tab 1</label> <div class="tab-content"> <h2>Content Title (don't use h1 tag here)</h2> <p>Some content.... </p>p> </div> </div> <!-- Other Tabs with The Same Structure --> </div>
You need to add a separate radio-label pair for each tab in the accordion. The HTML alone won’t give the desired behaviour, you need to add the appropriate CSS-rules too, let’s see how you can accomplish that.
Fixed Height Vertical Tabs
In this solution (see the screenshot below), the developer hid the radio button with the help of the display: none; rule, then he gave a relative position to the label tag that holds the title of each tab, and an absolute position to the corresponding label:after pseudo-element.
The latter holds the handle marked with a green + sign that opens the tabs. The closed tabs also utilize a handle marked with green “-” signs. In the CSS the closed tabs are selected with the help of the element + element selector.
You also need to give the content of the open tab a fixed height. To do this select the body of the open tab (marked with the tab-content class in the HTML above) with the help of the element1 ~ element2 CSS selector.
The basic logic of the CSS here is the following:
input[type=radio] {
display: none;
}
label {
position: relative;
display: block;
}
label:after {
content: "+";
position: absolute;
right: 1em;
}
input:checked + label:after {
content: "-";
}
input:checked ~ .tab-content {
height: 150px;
}
You can take a look at the full CSS here on Codepen. The CSS is originally written in Sass, but if you click on the “View Compiled” button, you can see the compiled CSS file.
IMAGE: Codepen by Jon YablonskiImage Accordion with Radio Buttons
This beautiful image accordion uses the same radio button method, but instead of labels, the developer here used the figcaption HTML tag to accomplish the accordion behaviour.
The CSS is somewhat different, mainly because in this case the tabs are not placed vertically but horizontally. The developer used the element + element CSS selector (that was used in the previous case to select the toggles) to ensure that the edges of the covered images still remain
visible.
IMAGE: Tympanus.netRead the detailed guide about how to create this elegant CSS-only accordion.
2. The Checkbox Method
The checkbox method utilizes the checkbox input type instead of the radio button. When the user selects a tab, they basically check the corresponding checkbox.
The difference compared to the radio button method is that it’s possible to open more than one tab at the same time, just like it’s possible to check more than one checkboxes inside a form.
On the other hand, the tabs won’t close themselves on their own when the user clicks on another one. The logic of the HTML is the same as before, just in this case you need to use checkbox for input type.
<div class="css-only-accordion"> <!-- One Tab Inside The Accordion --> <div> <input type="checkbox" name="tab-1" id="tab-1"> <label for="tab-1">Title of Tab 1</label> <div class="tab-content"> <h2>Content Title (don't use h1 tag here)</h2> <p>Some content.... </p>p> </div> </div> <!-- Other Tabs with The Same Structure --> </div>
Fixed Height Checkbox Accordion
If you want fixed height content tabs, the logic of the CSS is pretty much the same as in the radio button case, it’s just the input type has changed from radio to checkbox. In this Codepen pen you can take a look at the code.
IMAGE: Codepen by Jon YablonskiFluid Height Checkbox Accordion
When more than one tabs are open at the same time, displaying fixed height tabs may negatively affect user experience as the height of the accordion can significantly grow. This can be improved if you change the fixed height to fluid height; that means the height of the open tabs expand or shrink in accordance with the size of the content they hold.
To do so you need to modify the fixed height of the tab content to a max-height, and utilize relative units:
input:checked ~ .tab-content {
max-height: 50em;
}
If you want to better understand how this method works, you can take a look at this Codepen.
IMAGE: Codepen by Jon Yablonski3. The :target Method
:target is one of CSS3’s pseudo-selectors. With its help you can link an HTML element to an anchor tag in the following way:
<section id="tab-1"> <h2><a href="#tab-1"></a>Title of the Tab</a></h2> <p>Content of the Tab</p> </section>
When the user clicks on the title of a tab, the whole section will open thanks to the :target pseudo-selector, and the URL will be also changed to the following format: www.some-url.com/#tab-1.
The open tab can be styled in CSS with the help of the section:target { … } rule. We have a great tutorial here on hongkiat about how you can create nice CSS-only accordions with the :target method in both vertical and horizontal layouts.
The main shortcoming of the :target method is that it changes the URL when the user clicks on the tabs. This affects the browser history and the browser’s back button won’t take the user to the previous page, but to the accordion’s previous state.
4. The :hover Method
This latter shortcoming can be overcome if we utilize the :hover CSS pseudo-selector instead of :target, but in this case the tabs won’t react to the click but to the hover event. The trick here is that you need to either hide the unhovered elements, or reduce their width or height – depending on the layout of the tabs
The hovered element needs to be made visible, or set to full width/height in order to make the accordion work.
The following 3 CSS-only accordions were all made with the :hover method, click on the links below the screenshots to take a look at the code.
Horizontal Image Accordion
IMAGE: CodePen by vavikSkewed Accordion
IMAGE: Codepen by Gerald De LeonHover-Activated Accordion With Default State
IMAGE: Codepen by CoryThe post 4 Ways to Create Awesome CSS-Only Accordions appeared first on Hongkiat.