JSFiddle - React, Tailwind, and code Playground

by Vadim

HTML

<details>
  <summary>СПОЙЛЕР 1</summary>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  
  <details>
  <summary>СПОЙЛЕР 2</summary>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <a href="">ссылка</a>
  <details>
    <summary>СПОЙЛЕР 2.1</summary>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
  </details>  
  </details>
  
  <details>
    <summary>СПОЙЛЕР 3</summary>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
    <a href="">ссылка</a>
  </details>  
</details>

CSS

/* ИЗМЕНЕНИЕ МАРКЕРА */

details summary::-webkit-details-marker {
  display: none
}

details > summary {
  list-style: none;
}

details > summary:before {
  content: '+';
  margin-right: 7px;
}

details[open] > summary:before {
  content: '-';
}

details > details {
  padding-left: 5px;
  border-left: 1px solid black
}

/*-------------------------*/

a {
  display: block;
}