How to expand panel when clicking ONLY on text and NOT on the entire header panel?

0
votes

I have a simple accordion, and in order to expand/collapse each panel I would like to ONLY click on the header text from each panel and NOT on the whole panel header. Does anyone know how to make this happen?.

For example, if I click on Header 1 text I want the panel to expand/collapse Here's my code:

PLUNKER

<p-accordion>
 <p-accordionTab header="Header 1">
   Content 1
 </p-accordionTab>
 <p-accordionTab header="Header 2">
    Content 2
 </p-accordionTab>
 <p-accordionTab header="Header 3">
    Content 3    
 </p-accordionTab>
</p-accordion>
1
angulartypescriptprimeng

1 Answers

1
votes

One way of doing this is using custom template p-header from primeng SharedModule:

<p-accordion>
    <p-accordionTab>
       <p-header>Header 1</p-header>
       Content 1
    </p-accordionTab>
    <p-accordionTab>
       <p-header>Header 2</p-header>
        Content 2
    </p-accordionTab>
    <p-accordionTab>
        <p-header>Header 3</p-header>
        Content 3    
    </p-accordionTab>
</p-accordion>

and now you need to add some rules to your global css file:

.ui-accordion-header {
  pointer-events: none;
}

.ui-accordion-header p-header {
  pointer-events: auto;
}

Forked Plunker