parent
05d414adf4
commit
6da9dfc771
2 changed files with 34 additions and 2 deletions
@ -0,0 +1,32 @@ |
|||||||
|
--- |
||||||
|
title: 'Accordion' |
||||||
|
description: 'Create an accordion component using HTML, CSS, and JavaScript.' |
||||||
|
isNew: false |
||||||
|
sort: 18 |
||||||
|
difficulty: 'beginner' |
||||||
|
nature: 'JavaScript' |
||||||
|
skills: |
||||||
|
- 'HTML' |
||||||
|
- 'CSS' |
||||||
|
- 'JavaScript' |
||||||
|
- 'DOM Manipulation' |
||||||
|
seo: |
||||||
|
title: 'Build an Accordion Component with JavaScript' |
||||||
|
description: 'Learn how to create a responsive accordion component that allows users to toggle between different sections of content.' |
||||||
|
keywords: |
||||||
|
- 'accordion' |
||||||
|
- 'javascript accordion' |
||||||
|
- 'html and css' |
||||||
|
roadmapIds: |
||||||
|
- 'frontend' |
||||||
|
--- |
||||||
|
|
||||||
|
You are required to create an accordion component that displays a list of questions or headings. When a user clicks on a question, its corresponding answer or content section will expand while collapsing any previously opened section. This allows only one section to be open at a time, keeping the UI clean and organized. |
||||||
|
|
||||||
|
Given below is the mockup showing the accordion in its default and expanded states: |
||||||
|
|
||||||
|
[![Accordion](https://assets.roadmap.sh/guest/accordion-rbvpo.png)](https://assets.roadmap.sh/guest/accordion-rbvpo.png) |
||||||
|
|
||||||
|
This project will help you practice DOM manipulation, event handling, and implementing responsive design patterns using JavaScript. |
||||||
|
|
||||||
|
--- |
Loading…
Reference in new issue