Reputation: 4993
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:
<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>
Upvotes: 0
Views: 1739
Reputation: 214335
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;
}
Upvotes: 1