Add accordion projectc idea

pull/6983/head
Kamran Ahmed 3 months ago
parent 05d414adf4
commit 6da9dfc771
  1. 32
      src/data/projects/accordion.md
  2. 4
      src/data/projects/custom-dropdown.md

@ -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.
---

@ -2,8 +2,8 @@
title: 'Custom Dropdown' title: 'Custom Dropdown'
description: 'Create a custom dropdown using HTML, CSS, and JavaScript.' description: 'Create a custom dropdown using HTML, CSS, and JavaScript.'
isNew: false isNew: false
sort: 18 sort: 19
difficulty: 'beginner' difficulty: 'intermediate'
nature: 'JavaScript' nature: 'JavaScript'
skills: skills:
- 'HTML' - 'HTML'
Loading…
Cancel
Save