What is Accordion in Angular?

Accordion is a bootstrap feature that can be integrated into the HTML body. It is a section of HTML text where you can expand and collapse the button. If you click on the button and try to expand the accordion, the text that is covered by the accordion is displayed.

Installation

Installing bootstrap in Angular and using it is as simple as typing the following command into your terminal:

$ npm install bootstrap

Code

<div class="accordion-item">
  <h2 class="accordion-header" id="firstHeading">
    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#firstCollapse" aria-expanded="true" aria-controls="firstCollapse">
        How do I become eligible for a certificate?
      </button>
  </h2>
  <div id="firstCollapse" class="accordion-collapse collapse show" aria-labelledby="firstHeading"
    data-bs-parent="#accordionExample">
    <div class="accordion-body">
      You’ll be able to claim a certificate for any course you have access to through either Educative Unlimited or
      individual purchase after you've spent enough time learning. The time required is determined by the length of the
      course. For free courses, you’ll be asked to pay a one-time fee of $19 to claim a certificate.
    </div>
  </div>
</div>

Benefits of Accordion

Accordion:

  • Saves space on the browser page.
  • Is helpful in terms of encapsulating any data that a developer/owner of the website wants to hide from every user.
  • Allows the user to have a choice to consent to view content, rather than just showing the data on the main screen.

Free Resources

License: Creative Commons-Attribution-ShareAlike 4.0 (CC-BY-SA 4.0)