How to Show Hide or Toggle multiple Elements in Angular 7

JavaScript
#1

Hi everyone,
I want to show only certain elements and hide rest of the elements when I click a button.
For example I have 10 details pages of a trip. If I click details then I want only 1 detail out of 10 trip details.

so far this is what I tried and failed.

parent HTML

<div class="ft-data">
            <h4>2 Days Bangalore Mysore</h4>
          </div>
          <div class="ft-foot">
           <h4 class="ft-title text-upper"><a routerLink="/details"
            (click)="detailsbm2d()" class="btn btn-primary">DETAILS</a></h4>
          </div>

<div class="ft-data">
            <h4>2 Days Kodaikanal</h4><br>
          </div>
          <div class="ft-foot">
            <h4 class="ft-title text-upper"><a routerLink="/details" 
              (click)="detailskod2d()" class="btn btn-primary">DETAILS</a></h4>
          </div>

parent component

export class {
show: boolean= true;
show1:any = true;
  detailsbm2d() {
    this.show = !this.show;
    console.log('2 Days Bangalore Mysore is clicked');
  }
detailskod2d() {
    this.show1 = !this.show1;
    console.log('2 Days Kodaikanal is clicked');
  }
}

In child HTML

<div class="main-content" *ngIf=!show>
<h4>2 Days Europe</h4>
</div>
<div class="main-contents" *ngIf=!show1>
<h4>2 Days Russia</h4>
</div>

But I want only the first element main-content(2 Days Europe) has to be displayed not the second(2 Days Russia) in the screen but I get both the elements displaying when I click the first button i.e) detailsbm2d.

Appreciate any help.

Sincerely,
Anand.

#2

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make easier to read.

See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

Note: Backticks are not single quotes.

markdown_Forums

#3

Thanks Randell, will do from the next post

#4

Hi Anandin,
Did you already solved this code of yours? Because I solved it. I can share with you if you still struggle fixing the code. Just let me know.

#5