The checkbox method utilizes the checkbox input type instead of the radio button. Read the detailed guide about how to create this elegant CSS-only accordion. 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 ![]() The CSS is somewhat different, mainly because in this case the tabs are not placed vertically but horizontally. 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. IMAGE: Codepen by Jon Yablonski Image Accordion with Radio Buttons The CSS is originally written in Sass, but if you click on the “View Compiled” button, you can see the compiled CSS file. You can take a look at the full CSS here on Codepen. The basic logic of the CSS here is the following: 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. You also need to give the content of the open tab a fixed height. In the CSS the closed tabs are selected with the help of the element + element selector. The closed tabs also utilize a handle marked with green “-” signs. The latter holds the handle marked with a green + sign that opens the 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 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. You need to add a separate radio-label pair for each tab in the accordion. In this method, only one tab can be open at the same time. When they click on the next tab in the accordion, they select the next radio button, etc. ![]() 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. The Radio Button Method adds a hidden radio input and a corresponding label tag to each tab of the accordion. The first approach utilizes hidden form elements, while the second one makes use of CSS pseudo-selectors. In creating CSS-only tabs there are usually two main approaches, each of them has two frequent use cases. 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.Ĭreating 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. You can use them for many different things: for menus, lists, images, article excerpts, text snippets, and even videos Content accordions make a useful design pattern.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |