<div class="container">
  <details>
    <summary>
      How can we do this?
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </summary>
    <div class="details-info">
      <h2>This can have a title or image</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi.</p>
      <img src="https://picsum.photos/900/600?random=1" alt="" />
      <p>Phasellus vel erat a ante pharetra pharetra.</p>
    </div>
  </details>
  <details>
    <summary>
      Does this require any JavaScript?
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </summary>
    <div class="details-info">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. Nam eget massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
    </div>
  </details>
  <details>
    <summary>
      Is this accessible?
      <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor">
        <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
      </svg>
    </summary>
    <div class="details-info">
      <h2>Lorem ipsum dolor sit amet</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras convallis sodales erat vel accumsan. <a href="#">Nam eget</a> massa nec sem vulputate ullamcorper vel quis justo. Duis rhoncus tempor tempus. Nulla facilisi. Maecenas nulla ante, lacinia ac consectetur non, aliquet sollicitudin libero. Quisque congue odio sodales dui fermentum ac laoreet mauris eleifend. Nulla facilisi. Phasellus vel erat a ante pharetra pharetra.</p>
    </div>
  </details>
</div>

:root {
  --container-width: 800px;
  --body-bg: #c490d1;
  --body-color: #1a1a1a;
  --collapse-bg: #e5fcff;
  --collapse-color: #1a1a1a;
  --collapse-line-color: #acacde;
  --collapse-icon-color: #b8336a;
  --collapse-box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
    rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

details {
  background: var(--collapse-bg);
  color: var(--collapse-color);
  border-radius: 8px;
  margin-bottom: 24px;
  box-shadow: var(--collapse-box-shadow);
}

summary {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  cursor: pointer;
  list-style-type: none;
}

summary,
.details-info {
  padding: 1rem;
}

.details-info {
  border-top: 1px solid var(--collapse-line-color);
}

summary .icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  transition: transform 0.26s;
  color: var(--collapse-icon-color);
}

details[open] summary .icon {
  transform: rotate(180deg);
}

/* You could try to add some css animation here, but in the end, it doesn't work that well, uncomment the following to try it out */
/*
details[open] .details-info {
  animation: growAndFadeIn .24s ease-out forwards;
}*/

/* some basic styling (added to the bottom for convenience) */
* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  font-family: "Lato", sans-serif;
  font-size: 1.2rem;
  line-height: 1.5;
  color: var(--body-color);
  background: var(--body-bg);
}

img {
  display: block;
  max-width: 100%;
  margin: 0 0 24px 0;
}

h2 {
  margin: 0 0 8px 0;
  font-family: "Merriweather", serif;
  font-size: 1.5rem;
}

a {
  color: darkorange;
}

.container {
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 20px;
}

@keyframes growAndFadeIn {
  0% {
    font-size: 0;
    opacity: 0;
  }
  90% {
    font-size: 1em;
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}