Accordion is a container component that provides the ability to group contents in the form of multiple tabs. The content can be text, images, or any other components. All the tab contents are stacked in a vertical order. A basic definition of the Accordion component with different versions of Angular details would be as follows:

<p-accordion>
  <p-accordionTab header="AngularJS">
    AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X")  
    is a JavaScript-based open-source front-end web application 
    framework mainly maintained by Google and by a community of  
    individuals and corporations to address many of the
    challenges encountered in developing single-page applications.
  </p-accordionTab>
  <p-accordionTab header="AngularV2.0">
    The successor to the older AngularJS web framework, now simply 
    known as "Angular". Angular takes a web component-based 
    approach to build powerful applications for the web. It is used  
    along with TypeScript which provides support for both older
    and new versions of JavaScript.
  </p-accordionTab>
  <p-accordionTab header="AngularV4.0">
    Angular version 4.0.0 is a major release following announced 
    adoption of Semantic Versioning, and is backwards compatible with   
    2.x.x for most applications.
  </p-accordionTab>
</p-accordion>

The preceding Accordion will be displayed with vertical panels as shown in the following screenshot:

In the preceding simple example, the Accordion will display the tab contents one at a time. There is a provision in the component to display multiple tab contents by enabling the multiple attribute. The Accordion can be customized with powerful features such as customized headers, tab events, default selected tabs, and disabled behavior.

The customized definition of the Accordion component would be as follows:

<p-accordion>
  <p-accordionTab>
    <p-header>
      <img src="/assets/data/images/angularjs.png" 
        alt="Smiley face" width="42" height="42">
      AngularJS
    </p-header>
    AngularJS (commonly referred to as "Angular.js" or "AngularJS 1.X") 
    is a JavaScript-based open-source front-end web application 
    framework mainly maintained by Google and by a community
    of individuals and corporations to address many of the challenges  
    encountered in developing single-page applications.
  </p-accordionTab>
  <p-accordionTab header="AngularV2.0">
    <p-header>
      <img src="/assets/data/images/angular2.svg" 
        alt="Smiley face" width="42" height="42">
      AngularV2.0
    </p-header>
    The successor to the older AngularJS web framework, 
    now simply known as "Angular". Angular takes a web 
    component-based approach to build powerful 
    applications for the web. It is used along with TypeScript 
    which provides support for both older and new versions of  
    JavaScript.
  </p-accordionTab>
  <p-accordionTab header="AngularV4.0">
    <p-header>
      <img src="/assets/data/images/angular4.png" 
        alt="Smiley face" width="42" height="42">
      AngularV4.0
    </p-header>
    Angular version 4.0.0 is a major release 
    following announced adoption of Semantic Versioning,
    and is backwards compatible with 2.x.x for most applications.
  </p-accordionTab>
</p-accordion>

In the preceding example, the customized header is created with the p-header tag, which consists of Angular logos and text content. The Accordion will be displayed with customized advanced features as shown in the following image:

The Accordion component supports two event callbacks named onOpen and onClose, which invoked while opening and closing the tabs, respectively.