Currently, I am implementing an accordion feature with the option to expand or collapse all panels using two buttons. My goal is to allow users to manage each panel within the accordion individually.
However, I have encountered an issue that needs attention:
1) Let's assume the user expands all panels
2) Then, they decide to only collapse the first panel
3) Subsequently, they attempt to expand only the first panel again
4) The problem arises here - the other panels get collapsed as well (which is not intended).
I want each panel to function independently, without affecting the state of other panels when expanding or collapsing one specific panel. Is there a way to achieve this? Here is the code snippet where the issue persists:
expandAllPanels(){
this.arePanelsAllExpanded = true;
}
collapseAllPanels(){
this.arePanelsAllExpanded = false;
}