https://github.com/goganotclown/accordion
A lightweight and customizable JavaScript accordion to enhance your website's interactivity. Easily create collapsible content sections with smooth transitions for a user-friendly experience.
https://github.com/goganotclown/accordion
accordion animation collapsible css-variables css3 customizable frontend html5 interactive javascript mit-license responsive-design scss ui-component user-interface web-development
Last synced: 4 months ago
JSON representation
A lightweight and customizable JavaScript accordion to enhance your website's interactivity. Easily create collapsible content sections with smooth transitions for a user-friendly experience.
- Host: GitHub
- URL: https://github.com/goganotclown/accordion
- Owner: GogaNotClown
- License: mit
- Created: 2022-11-16T20:00:53.000Z (over 3 years ago)
- Default Branch: main
- Last Pushed: 2024-08-01T08:01:42.000Z (almost 2 years ago)
- Last Synced: 2025-08-20T22:36:52.540Z (10 months ago)
- Topics: accordion, animation, collapsible, css-variables, css3, customizable, frontend, html5, interactive, javascript, mit-license, responsive-design, scss, ui-component, user-interface, web-development
- Language: HTML
- Homepage: https://js-accordion.glitch.me/
- Size: 13.7 KB
- Stars: 2
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Accordion
A lightweight and customizable JavaScript accordion to enhance your website's interactivity.
Easily create collapsible content sections with smooth transitions for a user-friendly experience.
[](https://postimg.cc/V5g2V5gY)
## Usage
1. **Include Styles and Fonts:**
- Add the following stylesheet link to your HTML `` to import the required font:
```html
```
2. **HTML Structure:**
- Create an HTML structure for your accordion:
```html
-
Answer For Question 1
Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, illum ad consequatur accusantium
ratione harum voluptates corrupti fuga nostrum quidem inventore laboriosam illo modi veritatis.
Et ea nam mollitia in?
```
3. **Include JavaScript:**
- Import the JavaScript file at the end of your HTML file, just before the closing `` tag:
```html
```
4. **Customization:**
- Customize the accordion styles in your `style.css` or `style.scss` file according to your project's design
preferences.
## Styles and Variables
The component utilizes custom styles and CSS variables for easy customization. Here are key variables available in
the `style.css` and `style.scss`:
```css
:root {
--black: #111111;
--font: 'JetBrains Mono', monospace;
}
```
```scss
$black: #111111;
$font: 'JetBrains Mono', monospace;
```
## Additional Information
**License:**
This project is licensed under the MIT License.
Enjoy using the Accordion!