Tips for creating standalone accordion tabs

One simple accordion I have here includes 3 tabs within. I managed to make all the tabs open by default, but now I'm facing an issue. If I close Accordion Tab 1 and then try to reopen it, it ends up closing all the other tabs as well. What I am looking for is a solution where opening or closing any tab does not affect the others at all. Any suggestions on how to achieve this would be greatly appreciated. Thank you in advance!

This is what I envision:

Check out this working example

Here is my code snippet:

View LIVE DEMO

<p-accordion>
 <p-accordionTab header="Accordion Tab 1" [selected]="true">
   <ul>
     <li>Colors</li>
     <li>Cities</li>
     <li>Facility</li>
     <li>Hobbies</li>
   </ul>
</p-accordionTab>
<p-accordionTab header="Accordion Tab 2" [selected]="true">
    <ul>
      <li>Students</li>
    </ul>
</p-accordionTab>
    <p-accordionTab header="Accordion Tab 3" [selected]="true">
    <ul>
      <li>Music</li>
    </ul>
 </p-accordionTab>
</p-accordion>

Answer №1

To enable multiple selections, simply add [multiple]="true" to your p-accordion

<p-accordion [multiple]="true">
 <p-accordionTab header="Accordion Tab 1" [selected]="true">
   <ul>
     <li>Colors</li>
     <li>Cities</li>
     <li>Facility</li>
     <li>Hobbies</li>
   </ul>
</p-accordionTab>
<p-accordionTab header="Accordion Tab 2" [selected]="true">
    <ul>
      <li>Students</li>
    </ul>
</p-accordionTab>
    <p-accordionTab header="Accordion Tab 3" [selected]="true">
    <ul>
      <li>Music</li>
    </ul>
 </p-accordionTab>
</p-accordion>

For more details and examples, refer to the PrimeNG Docs:

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

React: The useContext hook does not accurately reflect the current state

I'm currently facing a dilemma as I attempt to unify data in my app. Whenever I click the button, the isDisplay value is supposed to be set to true; even though the state changes in my context file, it does not reflect in the app. Thank you for your ...

Incorporating an external HTML template into an AngularJS 1.5 component with the powerful combination of Webpack and Types

I am attempting to incorporate an external html file into my Angular component: import { LoginController } from './login.controller'; import './login.scss'; import './login.html'; class LoginComponent implements ng.IComponen ...

Conceal the PayPal Button

Currently, I'm facing a challenge where I need to dynamically show or hide a PayPal button based on the status of my switch. The issue is that once the PayPal button is displayed, it remains visible even if the switch is toggled back to credit card pa ...

List of suggestions for autocomplete in Angular

My autocomplete function is set up like this: chooseArtist: OperatorFunction<string, readonly string[]> = (text$: Observable<string>) => text$.pipe( debounceTime(200), distinctUntilChanged(), map((term: any) => term. ...

What is the best way to initiate a dialog within the handleSubmit function?

In my project, I have a component called SimpleDialog which is defined in the File.tsx file. export default function SimpleDialog() { const handleSubmit = (event: any) => { <SimpleDialog />; } return( <form> <Button type="submit& ...

How do I fix the build error that says "Operator '+' cannot be used with types 'number[]'?

The function below is designed to generate unique uuidv4 strings. function uuidv4() { return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, c => ( c ^ (crypto.getRandomValues(new Uint8Array(1))[0] & (15 >> (c / 4)) ...

Tips for adding items to a Form Array in Angular

I am working on a project with dynamic checkboxes that retrieve data from an API. Below is the HTML file: <form [formGroup]="form" (ngSubmit)="submit()"> <label formArrayName="summons" *ngFor="let order of form.controls.summons.controls; let i ...

Why am I seeing Node.js instead of TypeScript when I open VSCode?

I am facing an issue while debugging a TypeScript file in VSCode. When I try to launch it, instead of calling TypeScript on the file first, VSCode launches "node CheckFMBackup.ts" before "node CheckFMBackup.js". Can someone explain why this is happening? C ...

Implementing Global Value Assignment Post Angular Service Subscription

Is there a way to globally assign a value outside of a method within my app component? This is how my service is structured: import { NumberInput } from '@angular/cdk/coercion'; import { HttpClient } from '@angular/common/http'; import ...

The file 'angular2 src/app/app.routing' does not contain a exportable element called 'routing'

Shown below is the content of my packages.json file: { "name": "ng2", "version": "0.0.0", "license": "MIT", "angular-cli": {}, "scripts": { "start": "ng serve", "postinstall": "typings install", "lint": "tslint \"src/**/*.ts&bs ...

Error encountered when attempting to pass i18next instance to I18nextProvider

Issue: Error message: Type 'Promise' is missing certain properties from type 'i18n': t, init, loadResources, use, and more.ts(2740) index.d.ts(344, 3): The expected type is derived from the property 'i18n' declared within ty ...

Error encountered: UI-Router state's 'includes' property is not recognized as a valid property in the StateDeclaration type

Prior to initiating the state transition, it is necessary to validate whether the target state falls under a parent state. The MatchCriteria is as follows: this.transition.onStart({ to: function(state) { return state.includes.parentstate; } },() = ...

Mastering the art of effectively capturing and incorporating error data

Is there a way to retain and add information to an Error object in typescript/javascript without losing the existing details? Currently, I handle it like this: try { // code that may throw an error } catch (e) { throw new Error(`Error while process ...

Can you explain the distinction between embeddedViewRef and templateRef?

check this page for more information The statement above explains how an embedded view can be accessed from a different component than the one where it is defined, or it can be created separately using a TemplateRef. Can you clarify what this means? I&ap ...

Efficiently utilizing ngrx by orchestrating various services and actions to achieve accurate mapping

Combining multiple effects into one is my current goal due to an issue with dispatching actions separately. The aim is to execute sequentially after verifying the value returned from the first service call. Here are the three separate effects I have: @Eff ...

Exploring Typescript ENUMs

I need to save a list of alpha-numeric options as an ENUM in Typescript. Here is an example list: 1.134/2394 x 3-xyz 2.123/234 y 3-ery 3.345/99 t 4-red 4.4.1hv 3 secondary 5.2.51hv 3 secondary 6.1.61hv 3 secondary If anyone has thoughts on how to ...

Error TS2694 occurs in React when the namespace 'React' does not have an exported member. This issue typically arises when there is

Currently, I am attempting to incorporate the antd library into a React project that was created using Visual Studio 2017 (15.2.2). To start, I utilized the "ASP.NET Core Web Application" project template and selected "React.js" in the dialog below. http ...

When interacting with a <select> element, the behavior of test script execution varies between Firefox and Chrome

I've encountered an unusual problem that I need help describing and solving. Your assistance is greatly appreciated! The issue I'm facing involves Testcafe behaving differently when running the same test script on various browsers. testcafe: ...

Having trouble with the service connection in Stackblitz?

Objective: I am trying to establish a connection with the Data service in StackBlitz. Issue: Unfortunately, my attempts are not successful. Can anyone pinpoint what I am overlooking? Project Link: https://stackblitz.com/edit/angular-mpy6pr Many th ...

Establishing pathways in Angular 2

I'm currently working on configuring a route so that whenever I visit http://localhost:8080/user/beta/, it will redirect to http://localhost:8080/user/beta/#spreadsheet. The goal is to display the spreadsheet view, but instead of achieving that result ...