mirror of
https://github.com/kamranahmedse/developer-roadmap.git
synced 2025-09-01 05:21:43 +02:00
Add accordion projectc idea
This commit is contained in:
32
src/data/projects/accordion.md
Normal file
32
src/data/projects/accordion.md
Normal file
@@ -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:
|
||||
|
||||
[](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.
|
||||
|
||||
---
|
@@ -2,8 +2,8 @@
|
||||
title: 'Custom Dropdown'
|
||||
description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'
|
||||
isNew: false
|
||||
sort: 18
|
||||
difficulty: 'beginner'
|
||||
sort: 19
|
||||
difficulty: 'intermediate'
|
||||
nature: 'JavaScript'
|
||||
skills:
|
||||
- 'HTML'
|
Reference in New Issue
Block a user