https://github.com/codeadamca/javascript-accordion
A basic JavaScript and HTML accordion.
https://github.com/codeadamca/javascript-accordion
javascript learning-code
Last synced: 7 months ago
JSON representation
A basic JavaScript and HTML accordion.
- Host: GitHub
- URL: https://github.com/codeadamca/javascript-accordion
- Owner: codeadamca
- Created: 2023-01-30T18:55:39.000Z (almost 3 years ago)
- Default Branch: main
- Last Pushed: 2025-02-24T15:47:04.000Z (11 months ago)
- Last Synced: 2025-03-31T07:18:25.957Z (10 months ago)
- Topics: javascript, learning-code
- Language: HTML
- Homepage:
- Size: 15.6 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# JavaScript Accordion
A basic JavaScript and HTML accordion.
## Coding from Scratch
When coding something like a JavaScript accordion, half of the problem is how to split the lager objective into small steps. Download a copy of the `index.html` and `accordionjs` files and then follow these steps. Do not proceed to the next step until the current one is done and tested.
1. Use CSS to hide all sections of content.
2. Add a click event to the section titles. For now `console.log()` the word "open".
3. Function needs to know which section was clicked. Use `console.log()` to confirm.
4. On `click`, make the content below the link visible.
5. Use an `if` statement to hide or display the content.
6. Hide all other accordion content before displaying the new content.
***
## Repo Resources
* [Visual Studio Code](https://code.visualstudio.com/)
* [W3Schools - JavaScript](https://www.w3schools.com/js/)
