Accordion - Using HTML, CSS and Javascript

This is a simple reusable accordion component built using HTML, CSS and Javascript.

Table of contents

• Overview
  • Features
  • Link
• My process
  • Built with

Overview

Features

User is able to:

• open and close accordion via clicking anywhere on the heading.
• scroll the content inside accordion if its too long to fit in.

Visuals:

• open and close accordion with animation.
• make accordion heading small when its open and bring back to its original size when its closed.
• Show plus sign on accordion heading when its closed and minus when its open.

Links

• Live Stie URL: click here

My process

Built with

• Semantic HTML5 markup
• CSS custom properties
• Flexbox
• Javascript
• Event delegation