{"id":22650000,"url":"https://github.com/goganotclown/accordion","last_synced_at":"2026-02-09T20:43:28.042Z","repository":{"id":159407538,"uuid":"566972513","full_name":"GogaNotClown/accordion","owner":"GogaNotClown","description":"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.","archived":false,"fork":false,"pushed_at":"2024-08-01T08:01:42.000Z","size":14,"stargazers_count":2,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-08-20T22:36:52.540Z","etag":null,"topics":["accordion","animation","collapsible","css-variables","css3","customizable","frontend","html5","interactive","javascript","mit-license","responsive-design","scss","ui-component","user-interface","web-development"],"latest_commit_sha":null,"homepage":"https://js-accordion.glitch.me/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/GogaNotClown.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-11-16T20:00:53.000Z","updated_at":"2024-08-01T08:01:45.000Z","dependencies_parsed_at":null,"dependency_job_id":"b4192b25-79aa-4da2-9034-eea30a1efa01","html_url":"https://github.com/GogaNotClown/accordion","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/GogaNotClown/accordion","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GogaNotClown%2Faccordion","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GogaNotClown%2Faccordion/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GogaNotClown%2Faccordion/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GogaNotClown%2Faccordion/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/GogaNotClown","download_url":"https://codeload.github.com/GogaNotClown/accordion/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/GogaNotClown%2Faccordion/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":29280436,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-02-09T19:05:41.198Z","status":"ssl_error","status_checked_at":"2026-02-09T19:05:37.449Z","response_time":56,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["accordion","animation","collapsible","css-variables","css3","customizable","frontend","html5","interactive","javascript","mit-license","responsive-design","scss","ui-component","user-interface","web-development"],"created_at":"2024-12-09T08:29:51.455Z","updated_at":"2026-02-09T20:43:28.010Z","avatar_url":"https://github.com/GogaNotClown.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Accordion\n\nA lightweight and customizable JavaScript accordion to enhance your website's interactivity. \nEasily create collapsible content sections with smooth transitions for a user-friendly experience.\n\n[![Accordion Preview](https://i.postimg.cc/5NW1jCFF/image.png)](https://postimg.cc/V5g2V5gY)\n\n## Usage\n\n1. **Include Styles and Fonts:**\n    - Add the following stylesheet link to your HTML `\u003chead\u003e` to import the required font:\n      ```html\n      \u003clink href=\"https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100;200;300;400;500;600;700;800\u0026display=swap\" rel=\"stylesheet\"\u003e\n      \u003clink href=\"path/to/your/css/style.css\" rel=\"stylesheet\"\u003e\n      ```\n\n2. **HTML Structure:**\n    - Create an HTML structure for your accordion:\n      ```html\n      \u003cdiv class=\"accordion\"\u003e\n          \u003cdiv class=\"container\"\u003e\n              \u003cul\u003e\n                  \u003c!-- Add accordion items as needed --\u003e\n                  \u003cli class=\"accordion-question\"\u003e\n                      \u003cdiv class=\"accordion-title\"\u003e\n                          \u003ch3\u003eAnswer For Question 1\u003c/h3\u003e\n                          \u003cspan class=\"accordion-icon\"\u003e\u003c/span\u003e\n                      \u003c/div\u003e\n                      \u003cdiv class=\"accordion-content\"\u003e\n                          \u003cp\u003e\n                              Lorem ipsum dolor sit amet consectetur adipisicing elit. Sit, illum ad consequatur accusantium\n                              ratione harum voluptates corrupti fuga nostrum quidem inventore laboriosam illo modi veritatis.\n                              Et ea nam mollitia in?\n                          \u003c/p\u003e\n                      \u003c/div\u003e\n                  \u003c/li\u003e\n                  \u003c!-- Repeat the structure for other questions --\u003e\n              \u003c/ul\u003e\n          \u003c/div\u003e\n      \u003c/div\u003e\n      ```\n\n3. **Include JavaScript:**\n    - Import the JavaScript file at the end of your HTML file, just before the closing `\u003c/body\u003e` tag:\n      ```html\n      \u003cscript src=\"path/to/your/js/script.js\"\u003e\u003c/script\u003e\n      ```\n\n4. **Customization:**\n    - Customize the accordion styles in your `style.css` or `style.scss` file according to your project's design\n      preferences.\n\n## Styles and Variables\n\nThe component utilizes custom styles and CSS variables for easy customization. Here are key variables available in\nthe `style.css` and `style.scss`:\n\n```css\n:root {\n    --black: #111111;\n    --font: 'JetBrains Mono', monospace;\n}\n```\n\n```scss\n$black: #111111;\n$font: 'JetBrains Mono', monospace;\n```\n\n## Additional Information\n\n**License:**\nThis project is licensed under the MIT License.\n\nEnjoy using the Accordion!\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoganotclown%2Faccordion","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgoganotclown%2Faccordion","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgoganotclown%2Faccordion/lists"}