<details>
  <summary>Click me</summary>
  <figure>
    <img src="https://i.imgur.com/bG0Sedi.jpg" alt="" />
  </figure>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia
    eum fugiat, dignissimos exercitationem, dicta quidem iste quia
    voluptatum iusto vel, eius maiores distinctio cupiditate optio
    laborum natus architecto corporis consectetur. Officiis labore
    hic aperiam modi incidunt nostrum enim necessitatibus commodi
    sed numquam voluptate dignissimos quidem molestias at, non amet
    expedita fuga rerum. Sequi ad velit magnam sapiente culpa unde
    iure iusto! Eveniet ducimus blanditiis veritatis ipsam mollitia
    distinctio provident ad eaque deleniti ipsa nemo, placeat sequi
    sunt et accusantium veniam ut, voluptatum numquam perspiciatis
    fugiat ea, adipisci ab! Tempora sed eveniet alias ex pariatur
    sequi eum similique accusantium reprehenderit sunt!
  </div>
</details>

<details>
  <summary>Click me</summary>
  <figure>
    <img src="https://i.imgur.com/nEyDsdt.jpg" alt="" />
  </figure>
  <div>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia
    eum fugiat, dignissimos exercitationem, dicta quidem iste quia
    voluptatum iusto vel, eius maiores distinctio cupiditate optio
    laborum natus architecto corporis consectetur. Officiis labore
    hic aperiam modi incidunt nostrum enim necessitatibus commodi
    sed numquam voluptate dignissimos quidem molestias at, non amet
    expedita fuga rerum. Sequi ad velit magnam sapiente culpa unde
    iure iusto! Eveniet ducimus blanditiis veritatis ipsam mollitia
    distinctio provident ad eaque deleniti ipsa nemo, placeat sequi
    sunt et accusantium veniam ut, voluptatum numquam perspiciatis
    fugiat ea, adipisci ab! Tempora sed eveniet alias ex pariatur
    sequi eum similique accusantium reprehenderit sunt!
  </div>
</details>

img {
    max-width: 100%;
}

details {
    margin-bottom: 1rem;
}

details > summary {
    background: rgba(150, 255, 150);
    padding: 1rem;
    outline: 0;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.5s;
}

details > summary::-webkit-details-marker {
    background: url(https://marshall-storage.tistory.com/attachment/cfile29.uf@993E16335F785C0037CB43.svg) no-repeat center;
    background-size: contain;
    color: transparent;
    transform: rotate3d(0, 0, 1, 90deg);
    transition: transform 0.25s;
}

details[open] > summary::-webkit-details-marker {
    transform: rotate3d(0, 0, 1, 180deg);
}

details[open] > summary {
    background: rgba(100, 255, 100);
}

details[open] > summary ~ * {
    animation: reveal 0.5s;
}

@keyframes reveal {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}