I want to open the primeng accordion using a button that is placed in its custom header and i dont want the accordion to open if i click anywhere else. i am using primeng 11-lts version and this is my code for the header of accordion-

                                <ng-template pTemplate="header">
                                    <span class="flex w-full justify-content-between">
                                        <div class="flex align-items-center">
                                            <p-avatar image="{{ profileimage }}" [size]="showDetails ? 'xlarge' : 'large'" class="ml-5"> </p-avatar>
                                            <div class="ml-5 flex flex-column">
                                                <span class="font-normal white-space-nowrap text-2xl"
                                                    >{{ farmerdetail != null ? (farmerdetail.custom_id && farmerdetail.custom_id.id_number ? farmerdetail.custom_id.id_number : farmerdetail.unique_id) : '---' }}
                                                </span>
                                                <span class="font-semibold white-space-nowrap text-3xl">{{ farmerdetail != null ? farmerdetail.firstname : '---' }} {{ farmerdetail != null ? farmerdetail.lastname : '---' }}</span>
                                            </div>
                                        </div>
                                        <div class="flex align-items-center">
                                            <button pButton type="button" class="p-button-outlined" [icon]="showDetails ? 'pi pi-eye-slash' : 'pi pi-eye'" iconPos="left" [label]="showDetails ? 'Hide Details' : 'View Details'"></button>
                                        </div>
                                    </span>
                                </ng-template>

i tried using (click)=”$event.stopPrapagation()” on but then the accordion is never opening even if i click on the view details button