Reusable Simple Angular Accordion

Reusable simple accordion for your Angular projects. No jQuery dependency or anything. It’s supported in all Angular versions. RemixIcon is used for up / down icons., you can use any icon font.

Install npm:

npm install ngx-accordion --save

app.module.ts

import { AccordionModule } from "ngx-accordion";

@NgModule({
   declarations: []
   imports: [
      AccordionModule
   ]
})
export class AppModule { }

HTML Code:

<div class="faq-accordion">
   <accordion>
      <accordion-group heading="Where Should You Look?" [isOpened]="true">
         <p>Curabitur aliquet quam id dui posuere blandit. Cras ultricies.</p>
      </accordion-group>
      <accordion-group heading="How To Craft Great Podcast Questions?">
         <p>Curabitur aliquet quam id dui posuere blandit. Cras ultricies.</p>
      </accordion-group>
      <accordion-group heading="What Do You Want To Learn?">
         <p>Curabitur aliquet quam id dui posuere blandit. Cras ultricies.</p>
      </accordion-group>
      <accordion-group heading="Is It A Conversation You’d Eavesdrop Into?">
         <p>Curabitur aliquet quam id dui posuere blandit. Cras ultricies.</p>
      </accordion-group>
      <accordion-group heading="What Do You Think Your Mission In Life Is?">
         <p>Curabitur aliquet quam id dui posuere blandit. Cras ultricies.</p>
      </accordion-group>
      <accordion-group heading="What Are You Passionate About In Life?">
         <p>Curabitur aliquet quam id dui posuere blandit. Cras ultricies.</p>
      </accordion-group>
   </accordion>
</div>

For more information Click here

CSS Code:

.faq-accordion .panel {
   margin-bottom: 20px;
   border: 1px solid #eeeeee;
}
.faq-accordion .panel-group .dropup .panel-heading .panel-title a::before {
   content: "\F1AF";
}
.faq-accordion .panel-group .panel-heading .panel-title {
   margin-bottom: 0;
}
.faq-accordion .panel-group .panel-heading .panel-title a {
   border: 0;
   display: block;
   text-align: start;
   box-shadow: unset;
   position: relative;
   color: #000000;
   padding: 15px 45px 15px 25px;
   background-color: #ffffff;
   font-size: 20px;
   font-weight: 700;
}
.faq-accordion .panel-group .panel-heading .panel-title a::before {
   top: 50%;
   right: 25px;
   content: "\ea13";
   position: absolute;
   transform: translateY(-50%);
   font-size: 20px;
   font-family: 'remixicon';
}
.faq-accordion .panel-group .panel-collapse {
   border-top: 1px solid #eeeeee;
   padding: 25px;
}
.faq-accordion .panel-group .panel-collapse p strong {
   color: #000000;
   font-weight: 500;
}
.faq-accordion .panel-group .collapse.in {
   display: block;
}

That’s it. Hope this tutorial is helpful for you!

Thank You! If you have any queries, please let me know in the comments section.