\n\n[](LICENSE)\n\n\n\n\n\n\n[](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)\n[](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)\n[](https://bundlephobia.com/result?p=ngx-dummy/accordion-simple)\n[](https://accordion-simple-tester.netlify.app/)\n[](https://github.com/ngx-dummy/accordion-simple/issues)\n[](https://github.com/ngx-dummy/accordion-simple/fork)\n[](https://github.com/ngx-dummy/accordion-simple)\n[](https://www.jsdelivr.com/package/npm/@ngx-dummy/accordion-simple)\n\n[](https://paypal.me/ovsyukov)\n[](https://twitter.com/OvsyukovV)\n\n---\n\n#### https://vovansuper.github.io/accordion-simple\n\n### Installation:\n\n##### get the script to your _index.html_:\n\n```html\n\n```\n\n##### install using **npm**:\n\n```shell\nnpm install --save @ngx-dummy/accordion-simple\n```\n\n##### [use (_in your Angular/Ionic app_)](https://stackblitz.com/edit/ngx-dummy-accordion-sample?devtoolsheight=33&file=src/main.ts):\n\n```typescript\nimport { NgModule, Component, enableProdMode } from '@angular/core';\nimport { BrowserAnimationsModule } from '@angular/platform-browser/animations';\nimport { platformBrowserDynamic } from '@angular/platform-browser-dynamic';\nimport { AccordionModule, Accordion, IAccordionStyling } from 'https://cdn.jsdelivr.net/npm/@ngx-dummy/accordion-simple@latest/bundles/ngx-dummy-accordion-simple.umd.min.js';\n\n@Component({\n\tselector: 'my-app',\n\ttemplate: '',\n})\nclass AppCmp {\n\tsampleAccordionData: Accordion = {\n\t\tname: 'sample_accordion',\n\t\titems: [\n\t\t\t{\n\t\t\t\ttitle: 'Card 1',\n\t\t\t\tbody: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas. Veritatis doloremque optio dignissimos enim voluptatum voluptas nemo suscipit commodi. Adipisci, ratione',\n\t\t\t},\n\t\t\t{\n\t\t\t\ttitle: 'Card 2',\n\t\t\t\tbody: `\n Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit vero quo, veritatis ex atque voluptate dolore unde quas.\n `,\n\t\t\t},\n\t\t],\n\t};\n\tstyling: IAccordionStyling = {\n\t\titemsGuts: '1px',\n\t\tmaxWidth: '99%',\n\t\titemStyling: {\n\t\t\theadBgColor: '#ccc',\n\t\t\theadColor: 'black',\n\t\t\tbodyBgColor: '#f9f9f9',\n\t\t\tbodyPadding: '1rem',\n\t\t\tbodyMargin: '.1rem',\n\t\t},\n\t};\n}\n\n@NgModule({\n\timports: [BrowserAnimationsModule, AccordionModule],\n\tdeclarations: [AppCmp],\n\tbootstrap: [AppCmp],\n})\nclass AppModule {}\n\nplatformBrowserDynamic().bootstrapModule(AppModule);\n// ... \"enableIvy\": false, in tsconfig.json to use cdn.jsdelivr.net (not recommended)\n```\n\n### or check the sibling [_sample_ app](https://github.com/VovanSuper/accordion-simple/tree/master/projects/accordion-sample) :\n\n##### clone _(and deps install)_ and run Sample app :\n\n```shell\n$~> git clone https://github.com/ngx-dummy/accordion-simple.git\n$~> cd accordion-simple\n$~> npm install -g @angular/cli@latest && npm i\n$~> npm run sample\n```\n\n##### **or .. Try _directly_:**\n\n[](https://gitpod.io/#https://github.com/vovansuper/accordion-simple)\n\n**Make sure in install `BrowserAnimationsModule` or `NoopAnimationsModule` in the `AppModule` of Your application**\n\n---\n\n## Main idea\n\nSimple Angular accordion component and a simple demonstrator app; the app is a simple demonstrator project - showcasing the integration of the accordion library and applying basic setting of it.\n\nAny suggestions for improvement are welcome. Please [setup a new issue](https://github.com/VovanSuper/accordion-simple/issues/new) if you have any problems using this package or find ways in which it could be improved.\nTo ask for features / report on a bug follow the guide in : [Issue Report](./.github/ISSUE_TEMPLATE/bug_report.md)\n\n \n\n\nTODO:\n\n- [ x ] Dynamic styling of accordion and accordion items (headers, bodies...)\n\n\n\n \n\n---\n\n## Documentation\n\n- General typeDoc generated types of the Accordion-simple library are available in [[docs](./docs/typedocs/index.html)]\n\n- Base element is [``](./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts)\n\n- [`Accordion`](./projects/@ngx-dummy/accordion-simple/src/lib/accordion.component.ts) should have `@Input` on type [ [IAccordion ](./projects/@ngx-dummy/accordion-simple/src/lib/settings/IAccordion.ts)]\n\n- Sample usage vovansuper.github.io/accordion-simple\n\n---\n\n \n\n\nOther projects:\n\n| Name | URL |\n| :-----------: | :----------------------------------------------------: |\n| Select Simple | https://www.npmjs.com/package/@ngx-dummy/select-simple |\n\n\n\n \n\n---\n\n##### Redistribution\n\nLicensed under the GNU GPLv3 License - see the [LICENSE](LICENSE) file for details.\n\n[](LICENSE)\n\nLicensed under the GNU LGPLv3 License - see the [LICENSE](LICENSE) file for details.\n_Copyright (c) belongs to Vladimir Ovsyukov <>; Please, freely use **AS_IS** (under conditions defined within the [LICENSE](LICENSE))_\n","readmeFilename":"README.md"}
![](\"https://avatars3.githubusercontent.com/u/62136587?s=400&u=4580be0183d1496d982253d3a0d803de82465626&v=4\")