+
+```
+
+When the `.accordion-trigger` is clicked, an Angular animation is triggered to either scroll up or scroll down to show the `.accordion-body`.
+
+The `AccordionComponent` has one `Input`:
+
+- `triggerSelector: string` — This is the CSS class selector for the accordion trigger. It defaults to `.accordion-trigger`. If no projected content element has the same class, then a class inside the `AccordionComponent` is used as the trigger, `.accordion-header-container`.
+
+The component has one `Output`:
+
+- `isCollapsedUpdated: EventEmitter`: — The `Output` emits true or false, letting the parent component know if the accordion is open or not. That way the parent component can change its display in some way depending on the status. It doesn't need to change the visibility of the `[accordion-body]`, but maybe an icon or something like that.
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion.module.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion.module.ts
new file mode 100644
index 0000000..8bc2458
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion.module.ts
@@ -0,0 +1,10 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { AccordionComponent } from './accordion/accordion.component';
+
+@NgModule({
+ declarations: [AccordionComponent],
+ exports: [AccordionComponent],
+ imports: [CommonModule],
+})
+export class AccordionModule {}
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css
new file mode 100644
index 0000000..6b6cf6d
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.css
@@ -0,0 +1,3 @@
+.accordion-body-container {
+ overflow: hidden;
+}
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
new file mode 100644
index 0000000..2533e3b
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.html
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
new file mode 100644
index 0000000..984633f
--- /dev/null
+++ b/projects/ngx-plug-n-play-lib/src/lib/accordion/accordion/accordion.component.spec.ts
@@ -0,0 +1,68 @@
+import { AccordionComponent } from './accordion.component';
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed, async, fakeAsync, tick } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
+
+@Component({
+ selector: 'app-test-host',
+ template: `
+
+
+
+ The AccordionModule contains one component, the AccordionComponent. It uses content
+ projection to provide a trigger to open and close the accordion, and the body of the accordion. The parent
+ component, the one implementing the accordion, thus determines all the styles for the component.
+
+
+
+ When the .accordion-trigger is clicked, an Angular animation is triggered to either scroll up or scroll
+ down to show the .accordion-body.
+
+
+
The AccordionComponent has one Input:
+
+
+
+ triggerSelector: string — This is the CSS class selector for the accordion trigger. It
+ defaults to .accordion-trigger. If no projected content element has the same class, then a class
+ inside the AccordionComponent is used as the trigger, .accordion-header-container.
+
+
+
+
The component has one Output:
+
+
+
+ isCollapsedUpdated: EventEmitter<boolean>: — The Output emits true or
+ false, letting the parent component know if the accordion is open or not. That way the parent component can
+ change its display in some way depending on the status. It doesn't need to change the visibility of the
+ [accordion-body], but maybe an icon or something like that.
+