Tips for expanding/collapsing accordion tab with the click of a button

I need help with my accordion setup. Right now, I can expand/collapse an accordion tab by clicking anywhere on the tab. However, I would like to only be able to expand/collapse the tab when clicking on the "Click me" button and not on the accordion tab itself. Can someone provide guidance on how to achieve this? Thank you in advance!

Below is the code I am currently using:

VIEW LIVE DEMO

<p-accordionTab header="Accordion Tab 1" [selected]="true">
   <p-header>
      Accordion Tab 1
      <span>
         <button (click)="myFunction($event)">Click me</button>
      </span>
  </p-header>
   <ul>
     <li>Colors</li>
   </ul>
</p-accordionTab>
angulartypescriptprimeng

Answer №1

After reviewing the documentation for the accordion component being utilized, it appears that you can utilize the Programmatic Control feature to achieve your desired functionality.

I have made some modifications to your code in this DEMO. In this demo, all tabs are disabled and they can only be opened/closed programmatically by clicking on the "Click me" buttons within their headers.

UPDATE: Here is an updated DEMO featuring:

  • multiple="true"
  • All tabs open by default
  • Custom styling that overrides the disabled property

Answer №2

Cascading Style Sheets File:-

.zippy{
 border: 1px solid #ccc;
 border-radius:2px;
}
.zippy-heading{
 font-weight: bold;
 padding: 20px;
 cursor: pointer;
 background: #f09b9b;
}
.zippy-body{
 padding: 20px;
}
.expanded{
 background: #b3b0b0;
}

HTML View:-

<div class="zippy" style="padding:40px;">
  <div class="zippy-heading"
    [class.expanded]="isExpandedBikes"
    (click)="onBikeClick()">
    {{bike}}
    <span
      class="fa"
      [class.fa-angle-down] ="!isExpandedBikes"
      [class.fa-angle-up]="isExpandedBikes"
      (click)="onBikeClick()" style="font-size: 20px; position: absolute;right: 50px;"></span>
  </div>
  <div *ngIf="isExpandedBikes" class="zippy-body">
    <li *ngFor ="let data of bikeContent">
      {{data}}
    </li>
  </div>
</div>

Component Script:-

constructor() { 
 this.bike = "Bikes";
 this.bikeContent=["My First Bike","My Second Bike","My Third Bike"];
}

Function for Button in Component Script:-

 onBikeClick(){
  this.isExpandedBikes =! this.isExpandedBikes;
 }

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

Transforming JSON data into a model object in Angular, with the ability to handle dynamic

I am currently working on developing an Angular dashboard for metrics that are being generated by DropWizard. The json snippet returned by the metrics looks something like this: [ { 'gauges': { 'TaskPoolService.converter': { ...

angular

Utilizing TypeScript 3.1: Easier Array Indexing with Enums in Strict Mode

Enabling TypeScript "strict" mode with "noImplicitAny" causes this code to fail compilation. I am looking for guidance on how to properly declare and use Arrays indexed by Enum values. namespace CommandLineParser { enum States { sNoWhere, sSwitchValu ...

typescript

`ng build`: transferring scripts to a subdirectory

When running the command ng build, it exports files to the dist folder like this: index.html main.bundle.js styles.bundle.js ... I would like the scripts to be in a subfolder: *index.html scripts/main.bundle.js scripts/styles.bundle.js ...* ...

angularangular-cli

The impact on performance when utilizing object literals within a component template for ng-template context with ngTemplateOutlet in Angular

When passing context to ng-template, what are the performance implications of using an object literal in the template? <ng-container *ngTemplateOutlet="template;context:{ field: value };"></ng-container> as opposed to: <ng-container *ngTe ...

angularangular-template

Transferring data from the server to the client side in Next JS with the help of getInitialProps

I am currently developing an application using nextJS. Within server/index.ts, I have the following code: expressApp.get('/', (req: express.Request, res: express.Response) => { const parsedUrl = parse(req.url, true); const { query } = ...

reactjstypescriptnext.js

Accessing confidential information from a server-side application like Node.js (express) or Asp.net-core to be displayed on the client-side using Angular

My belief is that I will receive an HTML form through a POST method which will contain a token, and I need to catch it on the server side. app.post('/callback', (req, res)=> { var token = req.body.access_token res.cookie('acc ...

javascriptnode.jsangularasp.net-core

What is causing this issue in TypeScript version 4.8?

After updating to TypeScript 4.8 in VSCode, I have encountered an error in one of my React projects that was not present before. Strangely, this error does not prevent the code from compiling successfully when building the project. It's challenging to ...

reactjstypescripttypescript-generics

Discovering the interface type of class properties in order to implement a factory method

I am struggling with implementing a factory method in my code. I want to be able to pass not only a Class type to instantiate but also a set of default values for the properties within the class. My goal is to have the compiler notify me if I try to pass i ...

typescript

Modifying the return type of an observable using the map operator

I have been investigating how to modify the return type of an Observable. My current framework is Angular 5. Let's take a look at this example: public fetchButterflyData(): Observable<Butterfly[]> { return http.get<Larva[]>('u ...

angulartypescript

Switching slides in Ionic 4 with a simple button click

I want to switch slides by clicking a button on my presentation. Here is an example code snippet: <ion-slides> <ion-slide> Slide one <ion-slide> <ion-slide> Slide Two <ion-slide> </ion-slides> <butt ...

angulartypescriptionic-frameworksliderionic4

There was an error in reading the 'nativeElement' property in Angular's waveform library, resulting in a TypeError

This is the code I wrote, but it is showing an error: The waveform should be created, but the function to create the waveform is not working. startRecording() { this.mediaSectionVisible = false; if (!this.isRecording) { this.isRecording = t ...

javascriptangularerror-handlingwaveformaudiowaveform

How to Delete Multiple Rows from an Angular 4 Table

I have successfully figured out how to remove a single row from a table using splice method. Now, I am looking to extend this functionality to remove multiple rows at once. html <tr *ngFor="let member of members; let i = index;"> <td> ...

javascriptangulartypescript

Wallaby.js - The async() test helper requires a Zone to function properly

This project is built with Angular 6.x and tests are conducted using Karma/Jasmine. I'm facing a challenge while using Wallaby where my tests run successfully outside of it, indicating a possible configuration issue. Specifically, when running tests ...

angularjasminewallaby.js

Unexpected error in boot.ts file in Angular 2

I am currently experimenting with various folder arrangements for Angular 2. When attempting to launch a local server, I encounter the following error: Uncaught SyntaxError: Unexpected token < Evaluating http://localhost:3000/prod/app/TypeScript/bo ...

javascriptangulardirectory

The type 'string[]' is missing the required property 'label', resulting in a typescript error

Within my codebase, I've defined a type called Person that looks like this : type Person = { value?: string[]; label?: string[]; }; Additionally, there is a promise function in my project: async function main(): Promise<Person> { const fo ...

reactjstypescript

angular-oauth2-oidc - Issue with missing 'State' and 'Scope' parameters

One crucial requirement set by the identity server is to refrain from including 'state' and 'scope' in the URL. The specified request format is as follows URL?app=xxx&response_type=code&client_id=yyy&state=zzz&redirect_ ...

angularsecurityoauthidentityserver4angular-oauth2-oidc

Strategies for eliminating nested subscriptions in the search for names

I need assistance with refactoring a component I created to search for GitHub users by login. The current implementation contains nested subscribe blocks, and I would like to rewrite it using rxjs operators without nesting them. You can find the live exam ...

angularrxjs

React: Leveraging error boundaries to identify malfunctioning components

In my project using React 16.3 and TypeScript, I've been exploring error boundaries with the ComponentDidCatch() function overrides. To improve future debugging processes, I'm interested in catching errors at the component level to visually highl ...

reactjstypescripterror-handlingruntime-error

Express functions properly when handling the root route, but encounters issues with sub routes as it sends empty response bodies

Inside the routes.ts file: const router:Router = express.Router() // Route to get all blogs router.get('/',async (req:Request,res:Response)=>{ res.status(200).send("message sent") }) router.get('/admin',async (req:Requ ...

javascriptnode.jstypescriptexpressnext.js

The datepicker is functioning correctly, however, the displayed value does not reflect the updated date

The version of angularjs being used is 1.5.11. Within my .NET MVC project, the bs-datepicker element from angularjs is incorporated. Featured below is the datepicker component accompanied by a pair of images functioning as buttons within my application: & ...

angularjstypescriptrazordatepicker