Аккордеон

Один

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Строчка языкового назад запятых! Силуэт великий повстречался назад осталось подпоясал?

Два

Далеко-далеко за словесными горами в стране гласных и согласных живут рыбные тексты. Всемогущая текста, парадигматическая одна даже большого снова рекламных прямо лучше!

Три

Бросил снова взобравшись рыбного за меня но лучше она продолжил ручеек заглавных необходимыми семь агентство имени, последний одна переулка коварный?

HTML CSS


<div class="c-accordeon">
  <section class="c-collapsed">
    <details class="c-collapsed__details">
      <summary class="c-collapsed__summary">
        Один
      </summary>
      <div class="c-collapsed__secret">
        <p>
          Содержимое раз.
        </p>
      </div>
    </details>
  </section>
  <section class="c-collapsed">
    <details class="c-collapsed__details">
      <summary class="c-collapsed__summary">Два</summary>
      <div class="c-collapsed__secret">
        <p>
        Содержимое два.
        </p>
      </div>
    </details>
  </section>
  <section class="c-collapsed">
    <details class="c-collapsed__details">
      <summary class="c-collapsed__summary">Три</summary>
      <div class="c-collapsed__secret">
        <p>
        Содержимое три.
        </p>
      </div>
    </details>
  </section>
</div>


.c-collapsed {
  --clr-summary-back: transparent;
  --clr-summary-border: var(--clr-gray-3);
  --size-summary-border-radius: 8px;
  --clr-accordeon-text: var(--clr-font);
  --clr-summary-arrow: var(--clr-sym-summary-arrow);
}
.c-collapsed__details {
  background-color: var(--clr-summary-back);
  border: 1px solid var(--clr-summary-border);
  border-radius: var(--size-summary-border-radius, 8px);
  padding: 0 2rem;
  color: var(--clr-accordeon-text);
}
.c-collapsed__details[open] {
  padding-bottom: 1.5rem;
}
.c-collapsed__details[open] .c-collapsed__summary::after {
  transform: rotate(180deg);
}
.c-collapsed__details[open] summary ~ * {
  animation: sweep 0.3s ease-in-out;
}
.c-collapsed__details:last-child {
  margin-bottom: 0;
}
@keyframes sweep {
  0% {
    opacity: 0;
    margin-left: -10px;
  }
  100% {
    opacity: 1;
    margin-left: 0px;
  }
}
.c-collapsed__summary {
  position: relative;
  padding: 1.5rem 2rem;
  margin-left: -2rem;
  margin-right: -2rem;
  user-select: none;
  list-style: none;
  cursor: pointer;
  color: var(--clr-accordeon-text);
}
.c-collapsed__summary::marker, .c-collapsed__summary::-webkit-details-marker {
  display: none;
}
.c-collapsed__summary__summary-arrow {
  width: 1.125rem;
  height: 0.625rem;
}
.c-collapsed__summary::after {
  width: 1.125rem;
  height: 0.625rem;
  display: inline-block;
  content: "";
  position: absolute;
  top: calc(50% - 0.3125rem);
  right: 2rem;
  mask: url(../img/svg/icons/arrow-down.edacdf64ce.svg) no-repeat 50% 50%;
  mask-size: cover;
  background-color: var(--clr-summary-arrow);
  transition: transform 200ms ease-in;
  transform-origin: center;
}
.c-collapsed__secret {
  line-height: 1.5;
}