Create an Accordion with HTML and CSS

Things You Will Learn

By following this tutorial, you will learn the following:

1. How to structure HTML elements to create an accordion.
2. Applying CSS styles to customize the accordion’s appearance.
3. Using CSS transitions and animations to create smooth accordion animations.
4. Enhancing the accordion with additional features like icons and hover effects.

By the end of this tutorial, you’ll have a fully functional accordion that you can customize and integrate into your own web projects.

Project Folder Structure:

To follow along with the tutorial and practice creating your accordion, make sure you have the following project folder structure:

In this structure, index.html will contain the HTML markup, styles.css will hold the CSS styles. You can also use different file names or organization methods that suit your workflow.

HTML:

1. Accordion Container:

   • The accordion container is wrapped in a <div> element with the class name “accordion”. This element holds all the accordion items.

2. Accordion Items:

   • Each accordion item is represented by a <div> element with the class name “accordion-item”.
   • Inside each accordion item, we have:
     • An <input> element with the attribute type="checkbox" and a unique ID. This checkbox will control the visibility of the content section.
     • A <label> element with the class name “accordion-header” and the for attribute referencing the corresponding checkbox ID. This label acts as the header for the accordion item.
     • Inside the label, we have two spans:
       • The first span contains the text for the accordion item, e.g., “Accordion Item 1”.
       • The second span contains an <i> element with the class “fa-solid fa-caret-right” from the Font Awesome library. This creates an arrow icon next to the text.

3. Accordion Content:

   • Inside each accordion item, after the label, we have a <div> element with the class name “accordion-content”. This element holds the content that will expand and collapse.
   • The content can be any HTML elements, such as paragraphs, images, lists, etc. In this tutorial, we have a simple paragraph for demonstration purposes.

CSS:

1. Global Styles:

   • The * selector is used to apply certain styles to all elements, such as setting box-sizing to border-box and using the “Poppins” font family.
   • The body has a background color of #0083e9, which sets the overall background color for the page.

2. Accordion Styles:

   • The “accordion” class sets the width, position, and centering of the accordion container using absolute positioning and translation techniques.

3. Accordion Item Styles:

   • The “accordion-item” class defines the padding, background color, and border-radius for each accordion item. The margin-bottom property adds some space between the accordion items.

4. Accordion Header Styles:

   • The “accordion-header” class defines the styles for the label element, which serves as the header for each accordion item.
   • The font-size, color, and padding properties are set to customize the appearance of the accordion header.
   • The cursor: pointer property changes the cursor to a pointer when hovering over the header.
   • Inside the label, the arrow icon is styled by using the .arrow class and transforming it using the rotate property to create the animation when the accordion item is expanded.

5. Accordion Content Styles:

   • The “accordion-content” class sets the color, font-size, and line-height properties for the content section.
   • The max-height: 0 and overflow: hidden properties hide the content initially.
   • The transition property is used to create a smooth animation effect when the content section expands and collapses. The max-height property is animated over a 1s duration.

Conclusion:

Accordions are an excellent way to present and organize content on a webpage. With HTML, CSS you can create interactive and visually appealing accordions that enhance the user experience.

In this tutorial, we covered the basics of creating an accordion using HTML and CSS. By following along with the video tutorial and understanding the concepts explained here, you’ll be able to build your own accordions and customize them to fit your project’s needs.

Feel free to experiment with different styles, animations, and functionality to create unique and engaging accordions for your websites. Remember to practice and apply what you’ve learned to solidify your understanding.

Now, go ahead and start creating amazing accordions for your web projects!

If you have any questions or need further clarification, feel free to leave a comment on the video or reach out to me on my social media channels. Happy coding!