Кнопка переключения - показать / скрыть информацию

Question

Может ли кто-нибудь помочь мне скрыть / показать информацию, когда я нажимаю на значок (стрелка). Я пытался использовать javascript, хотя это не самый лучший способ, но он также не работал.

Я намерен, нажав на изображение https://img.icons8.com/android/24/000000/down.png , информация ниже будет скрыта, и это изображение изменится на изображение стрелки вверх https://img.icons8.com/android/24/000000/up.png

Когда вы нажимаете на вверх -после того, как информация появляется снова, и это же изображение заменяется изображением стрелки, направленной вниз.

Может ли кто-нибудь мне помочь?

DEMO - STACKBLITZ

КОД

<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>

Answer 1

Прежде всего, удалите ваши стили для hide1 класса. Лучше полагаться на директиву * ngIf в 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"/>

Затем реализовать метод для переключения показанного свойства:

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

Теперь вам нужно привязать этот метод к событию DOM при div, оборачивающем ваши стрелки:

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

И последний шаг - использовать директиву * ngIf для другого элемента, который вы хотите переключить:

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

Answer 2

HTML5 введены теги <summary> и <details>, позволяющие переключать информацию.

Вот пример:

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