>when an English button is clicked, its corresponding div should be shown. If another button is clicked, its div should also show without closing the previous one. I want each div to close only when its respective button is clicked again.
>Please note that this needs to be done dynamically as the number of languages is unknown.
>Ensure that it is not hardcoded for static data.
*in my HTML *
<div *ngFor="let lang of langList;let index = index" >
<div class="engbutton">
<button class="englishButton" (click)="onclickEnglishDiv(lang,index)">{{ lang }}</button>
<div *ngIf="visibleIndex === index" class="knowEnglish">
<div>
<div *ngFor="let data of filteredLangList" class="engDivObj">{{data.name}}</div>
</div>
</div>
</div>
</div>
in my TS
onclickEnglishDiv(clickLang,index){
if (this.visibleIndex !== index) {
this.visibleIndex = index;
}
}
- Clicking on a div will open it, and clicking on another div will close the previous one while opening the new one. * What I want *
I want each button to open its respective div without closing any other divs. Only when the same button is clicked can its div be closed.
- Make it dynamic so it works smoothly even with new data.
View the sample here
Check out the jQuery versionhere. I need the same functionality in Angular 7 with a dynamic approach, no hardcoded boolean values for each div.