https://github.com/pktcodes/accordion-react-project

Accordion Project using React
https://github.com/pktcodes/accordion-react-project

accordion css3 ecmascript html5 javascript react react-hooks react-icons usestate

Last synced: about 1 month ago
JSON representation

Accordion Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/accordion-react-project
• Owner: pktcodes
• Created: 2022-07-25T03:05:52.000Z (over 2 years ago)
• Default Branch: master
• Last Pushed: 2022-07-25T04:39:36.000Z (over 2 years ago)
• Last Synced: 2024-11-08T23:58:25.155Z (3 months ago)
• Topics: accordion, css3, ecmascript, html5, javascript, react, react-hooks, react-icons, usestate
• Language: CSS
• Homepage: https://react-accordion-prod.netlify.app/
• Size: 910 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Accordion 🪗

> PROD [Live] : https://react-accordion-prod.netlify.app/

#### Accordion consists of a straightforward user interface where there is a

- Tabbed interface with a list of **questions** and **answers** stacked vertically.

- Each **Question** can be expanded or collapsed to reveal the content associated with that item on the click of buttons i.e., ➕ to show and ➖ to hide.

- Data is handled by the `data.js` file.

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm start` to start up the development server on default port 3000.

#### Languages

HTML, CSS, JavaScript, ECMAScript, React - Hooks ~ useState

#### Packages

[React Icons](https://www.npmjs.com/package/react-icons)

#### Deployment / Hosting

Netlify

---

#### Idea

[UI Design Daily](https://uidesigndaily.com/posts/sketch-accordion-website-day-1175)

![](./idea.png)

#### React Icons

[react icons](https://react-icons.github.io/react-icons/)

```

npm install react-icons --save

```

```javascript

import { FaHome } from 'react-icons/fa';

const Component = () => {

  return ;

};

```

---

_Note: I have developed this project ~ [4] as part of React and Projects Course taught by John Smilga._