Is it possible to enlarge the panel only by clicking on the text, without affecting the entire header panel?

I need help with my accordion setup. I want to be able to expand or collapse each panel by clicking only on the header text, not the entire header area. Can anyone provide guidance on how to achieve this?

For example, when I click on the text for 'Header 1', I want that specific panel to expand or collapse. Here is the code snippet I am currently using:

Check out Plunker for reference

<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>
angulartypescriptprimeng

Answer №1

To achieve this, you can utilize a custom template named p-header from the 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>

You will also need to apply some rules in your global CSS file:

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

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

Forked Plunker

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring ASP.Net Core features: IApplicationBuilder.Map for routing, serving SPA, and managing static

I am exploring the use of Asp.Net Core 2.2 to host my Angular application and handle API requests (on /api). In my Startup.cs file, specifically in the Configure method, I have configured it as follows: app.Map("/home", config => { ...

angularasp.net-coresingle-page-application

Learn the process of synchronously loading forms and data in Angular

Looking to synchronize the loading of data and form... Let's start by reviewing the code: ngOnInit() { if (this.data.fromCalendar) { this.singleTraining(); } }, 200); this.formControl(); } formControl() { this.gib ...

javascriptangular

Recover the node modules directory

By mistake, I deleted the MyProject/node_modules directory from my solution. Is there a way to recreate this folder? I attempted running npm install and npm update, but had no luck. ...

node.jsangularvisual-studionode-modules

Debugging in Next.js and Sanity.io: "Client Components do not support async/await yet, only Server Components."

I am a beginner working on creating a website and e-commerce store using React, Next 14, Typescript, and Sanity as the CMS. I have been following a tutorial available at https://www.youtube.com/watch?v=g2sE034SGjw&t. Encountering the following error: ...

reactjstypescriptnext.jsasync-awaitsanity

What techniques can I use to adjust the size of an image through zooming in and out?

In my custom gallery component, the crucial code section looks like this: <Gallery> <Header> <img src={galleryIcon} alt='Galley icon' /> <h1>My Gallery</h1> </Header> ...

javascriptcssreactjstypescript

Error in Angular TypeScript occurs when attempting to read properties of an undefined value

Here is the interface that I am working with: export interface IQuest { Id: number, lat: number, lon: number, Question:string, Answer:boolean, IsDone:boolean, Correct:boolean, Range:number} Along with the following component: export class AppComponent imp ...

angulartypescriptpropertiesundefined

"Exploring the Angular 3 router's wildcard route matching feature

Why does the following route configuration always navigate to ** instead of the route for app/jungle? import {bootstrap} from '@angular/platform-browser-dynamic'; import { RouterConfig, provideRouter } from '@angular/<a href="/cdn-cgi/ ...

angularjsangular

Can I retrieve the return type of useFetch in Nuxt3?

I am running into an issue while trying to specify the APIBody type in the following manner: Property 'test' does not exist on type 'NonNullable<PickFrom<_ResT, KeysOf>>'. It seems like there is no straightforward way to def ...

typescriptvuejs3nuxtjs3

What is the best way to invoke a method within the onSubmit function in Vuejs?

I am facing an issue with a button used to log in the user via onSubmit function when a form is filled out. I also need to call another method that will retrieve additional data about the user, such as privileges. However, I have been unsuccessful in makin ...

typescriptformsvue.jsstoreonsubmit

multer failing to upload files using the default example

I am encountering difficulties with getting my code to function properly and I am not receiving any errors from multer. I have thoroughly double-checked everywhere for potential mistakes, but I am still stuck. Any assistance would be greatly appreciated. ...

angularexpressnpmmulter

The process of unit testing a component to verify the presence of a specific component on the page

Presenting my straightforward custom component dubbed as NavbarComponent with the selector app-navbar. This component serves as a basic static navbar and is being displayed in app.component.html: app.component.html <app-navbar></app-navbar> &l ...

angularjasminekarma-jasmine

Ensuring Valid Numbers in Angular 2

Working with Angular 2 (2.0.0) and TypeScript to set validation rules within an <input> element in a table column. For instance, let's say we have a table and some input fields: <table> <tr> <td>Values: {{ dataFromSer ...

validationangular

Guide to automatically installing @types for all node modules

As a newcomer to Typescript and NodeJs, I have been experiencing errors when mentioning node modules in my package.json file and trying to import them. The error messages I always encounter are as follows: Could not find a declaration file for module &apos ...

node.jsangulartypescriptnpm

Ways to duplicate package.json within a Dockerfile

My issue revolves around the challenge I am facing while attempting to copy my package.json to the Dockerfile context. Below is a representation of my file structure: src - apps -- api --- Dockerfile - docker -- tcp --- docker-compose.yml - package.json H ...

node.jstypescriptdockerdocker-compose

Typescript interface designed for objects containing certain optional property names as well as unspecified property names

I am looking to design an interface for an object that can have optional properties with specific names, as well as accept properties with arbitrary names. Here is my approach: interface CallBack { onTransition?(): any; // option A [key: string]: () = ...

typescripttypescript-typings

Unique: "Unique One-Step Deviation in Date Comparison"

A Little Background Information: I am working with data points that span from the current day to 5 days ahead, in 3-hour intervals (such as 10pm, 1am, 4am, 7am...). My goal is to organize these data points into arrays sorted by date, with each array repre ...

javascripttypescript

Unable to determine all parameters for the ViewController: (?, ?, ?)

During my work on a project using IONIC 3 and Angular 4, I encountered the need to create a component responsible for managing popover controllers. Transferring data from this component to the popover component was straightforward. However, I ran into an i ...

angularionic3angular4-forms

Set up SystemJS to properly load my Angular 2 component module

Recently, I made the switch from ng1 to ng2. I successfully imported Angular 2 and its modules into my project: <script src="/node_modules/systemjs/dist/system.src.js"></script> <script src="/node_modules/rxjs/bundles/Rx.js"></script& ...

angulartypescriptsystemjscommonjs

Inference in Typescript - Detecting unknown key in an object

I am struggling to implement type inference from a props object that is passed to a component and then used in a render function. While I can retrieve the keys of the object correctly, all types are being interpreted as unknown. I need some assistance in f ...

typescriptobjecttype-inference

Error encountered in Azure Pipelines build task: Failure due to requirement for initialization

When I directly invoke index.js using node, everything works fine. However, when running the Mocha tests, the task fails with a "Must initialize" error message. This is how my tasks index.ts code looks like: import * as path from "path"; import tl = requ ...

node.jstypescriptazure-devopsmocha.jsazure-pipelines-build-task