javascript - Nút chuyển đổi - hiển thị/ẩn thông tin

Có ai đó có thể giúp tôi ẩn/hiện thông tin khi tôi nhấp vào biểu tượng (mũi tên) không. Tôi đã thử sử dụng javascript, mặc dù nó không phải là cách tốt nhất, nhưng nó cũng không hoạt động.

Tôi dự định rằng bằng cách nhấp vào hình ảnh https://img.icons8.com/android/24/000000/down.png, thông tin bên dưới sẽ bị ẩn và hình ảnh đó sẽ đổi thành hình mũi tên hướng lên https://img.icons8.com/android/24/000000/up.png

Khi bạn nhấp vào mũi tên hướng lên, thông tin sẽ xuất hiện lại và cùng một hình ảnh đó được thay bằng hình ảnh mũi tên hướng xuống.

Có ai có thể giúp tôi không?

BẢN TRẢI NGHIỆM - STACKBLITZ

MÃ

<div *ngFor="let item of data">
    <div class="d-flex flex-row"
        style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
    <div>
        <img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
        <img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
  </div>
    <div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
    <div style="margin-left:auto">
        <img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
  </div>
    </div>
    <div class="d-flex flex-row"
                style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
        <div class="">
            <img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
    </div>
        <div>
            <span style="margin-left: 8px;">@{{item.name}}</span>
            <div>{{item.date}}</div>
        </div>
        <div style="margin-left:auto">
            <img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
    </div>
        </div>
</div>

Câu trả lời #1

Trước hết, hãy loại bỏ các kiểu của bạn cho lớp hide1. Tốt hơn nên dựa vào chỉ thị *ngIf trong Angular:

<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>

Sau đó triển khai phương thức để chuyển đổi thuộc tính shown:

toggle(item) {
  item.shown = !item.shown;
}

Bây giờ bạn phải gán phương thức này vào sự kiện DOM trên div bao quanh các mũi tên của bạn:

<div (click)="toggle(item)">
</div>

Và bước cuối cùng là sử dụng directive *ngIf trên phần tử khác mà bạn muốn bật/tắt:

 <div class="d-flex flex-row" *ngIf="item.shown" ...

Câu trả lời #2

HTML5 đã giới thiệu thẻ <summary> và <details> để cho phép bạn bật tắt thông tin.

Đây là một ví dụ:

<details>
<summary>Information you want shown</summary>
<p>Information you want toggled</p>
</details>