Guide: Create CSS-Based Content Accordion: Tips and Tutorial
Today, we’ll learn how to create a content accordion using only CSS3. This ensures that the accordion will work for all visitors, even those with Javascript disabled. While there are many jQuery plugins that can do this job, CSS3 is the only way to guarantee compatibility.
A new content accordion, featuring both horizontal and vertical slides, is being developed. Clicking on the header will open the slide and reveal its contents. Screenshots provide a preview of what it looks like.
Coding has commenced.
1. Prepare HTML and content
We’ll begin by constructing the HTML for an accordion.
This example demonstrates an accordion structure with five slides, each containing a title and a paragraph of content.
The slides are ready, so it’s time to give the accordion a makeover.
2. CSS style
To create an accordion effect, the containing div must be styled first. This will determine how each slide and heading is displayed.
Accordion boxes, with a width of 830px, overflow hidden, a margin of 10px auto, color #474747 and background #414141 with padding of 10px, are used to organize content.
Creating headings for slides is the next step.
The accordion section of a website has been given a float of left, an overflow of hidden, a color of #333, a cursor of pointer, and a background color of #333. When hovered over, the background changes to #444.
We set the background color of the section that serves as both heading and content to dark gray, allowing us to use less HTML and reuse the slide title as a heading.
The CSS property “display: none” has been applied to all
elements within
To ensure the paragraph remains hidden until the slide is opened, set its display to “none”.
CSS code has been added to a website to display numbers next to accordion sections. The code assigns a number (1-5) after each section, allowing users to easily identify them.
A CSS pseudo-class selector will be used to display a number at the bottom of the header, indicating which slide is currently open. This can be achieved by adding content after the section header.
Creating an accordion requires using jQuery to assign a click event to the header, as CSS does not have this capability.
To replicate a click event in CSS, the target pseudo-class selector can be used.
3. Using: Target Pseudo-Class Selector
Clicking a link can take you to a specific place on the page, and with the :target selector, you can format this fragment ID for styling purposes.
Adding a link to the accordion’s header will allow users to directly access the slide they want.
The accordion section has a white background with 10px padding. When hovered over, the background remains white. The h2 element has a width of 100%, and its anchor tag has a color of #333 and no padding. The p element is set to display block, while the h2 anchor tag has 8px 10px padding, is displayed as a block, with font size 16px and font weight normal. Its color is #eee and text decoration none.
The code resized the slide and changed its background color to white, revealing a previously hidden paragraph.
When you click on the accordion head, the slide’s style is altered to match its content.
4. Horizontal accordion
Developers have created a global accordion that offers the same functionality regardless of orientation. However, the headstock style will differ between horizontal and vertical versions.
A horizontal section of width 5% and height 250px is set to transition its width over 0.2 seconds with an ease-out effect.
The header section of the slide was set to 5% width, creating a closed slide. To display the content, an animation was added using the transition property.
A horizontal section was placed at 140px from the top and 15px from the left.
The position of numbers on slides will remain consistent across closed headings, but will differ from vertical headings.
The head of a closed slide has been rotated 90 degrees, with a width of 240px and a position relative to the left at -100px and top at 85px. When moused over, the open slide has a width of 73% and height of 230px, with the head rotated back to 0deg.
The code adjusts the size of the slide to fit the accordion, and rotates the heading back to 0 degrees so that it is displayed horizontally.
5. Vertical accordion
The vertical accordion functions similarly to its horizontal counterpart, but instead of adjusting the width, users must alter the height and text alignment is not required.
A vertical section with a width of 100% and a height of 40px will transition smoothly over 0.2 seconds using ease-out.
The slide’s height has been set to 250px, with a width of 97%.
The vertical accordion’s target event will be altered to display the slide, with the heading’s height adjusted accordingly.
The position of the number on each slide has been set to the left of 0 and 15 pixels above the top. Additionally, the number will be placed 60 pixels above the top and 810 pixels from the left when targeted. When not targeted, it will be moved to -9999px from the left.
When the slider is closed, the header’s position must be adjusted to accommodate the song on its right side. When opened, the number on the header must be hidden so that it shifts left on the screen.
When you click on the accordion head, the slide’s style is altered to match its content.
Paul Underwood, a PHP web developer from Bristol, UK, is writing tutorials about web development topics such as PHP, jQuery, CSS3 and HTML5. He also shares useful code snippets on his website Paulund.co.uk.
Create CSS-Based Content Accordion: Tips and Tutorial: benefits
Faq
Final note
This guide provides tips and tutorials on creating a CSS-based content accordion. If you have any questions, please reach out to us. Show your support by sharing this article with your friends.
Visitors with questions about the Create CSS-Based Content Accordion: Tips and Tutorial can ask us in the comment section or contact us directly. This guide is for educational purposes only. To correct any misinformation or add more methods, please contact us. For help, use our contact page or follow us on Whatsapp, Facebook, and Twitter. We answer questions within 24-48 hours (weekends excluded). For software updates and discussion, join our Telegram channel.
