This is a simple reusable accordion component built using HTML, CSS and Javascript.
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.
- Live Stie URL: click here
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- Javascript
- Event delegation