Redazione Centrale arrow_drop_down

Indirizzo: Via Roma, 1 - 00100 Roma

Email: redazione.centrale@email.com

Telefono: 06 123456

Sport arrow_drop_down

Email: sport@email.com

Telefono: 06 123457

Economia arrow_drop_down

Email: economia@email.com

Telefono: 06 123458

Cronaca arrow_drop_down

Email: cronaca@email.com

Telefono: 06 123459 

<div class="tree-node">
  <a href="#" class="tree-node__toggle link link--chevron-right">
    Redazione Centrale
    <span class="link__chevron material-symbols-outlined">arrow_drop_down</span>
  </a>
  <div class="tree-node__content">
    <p class="paragraph paragraph--2">Indirizzo, Email, Telefono...</p>
    <!-- Redazioni interne -->
    <div class="tree-node">
      <a href="#" class="tree-node__toggle link link--chevron-right">
        Sport
        <span class="link__chevron material-symbols-outlined">arrow_drop_down</span>
      </a>
      <div class="tree-node__content">...</div>
    </div>
  </div>
</div>
Redazioni Locali arrow_drop_down
Milano arrow_drop_down

Indirizzo: Via Montenapoleone, 1 - 20121 Milano

Email: milano@email.com

Napoli arrow_drop_down

Indirizzo: Via Toledo, 1 - 80134 Napoli

Email: napoli@email.com 

<!-- Tree annidato -->
<div class="tree-node">
  <a href="#" class="tree-node__toggle link link--chevron-right">
    Redazioni Locali
    <span class="link__chevron material-symbols-outlined">arrow_drop_down</span>
  </a>
  <div class="tree-node__content">
    <!-- Nodo figlio -->
    <div class="tree-node">
      <a href="#" class="tree-node__toggle link link--chevron-right">
        Milano
        <span class="link__chevron material-symbols-outlined">arrow_drop_down</span>
      </a>
      <div class="tree-node__content">
        <p class="paragraph paragraph--2">Contenuto...</p>
      </div>
    </div>
  </div>
</div>
/* CSS */
.tree-node__toggle {
  cursor: pointer;
}

.tree-node__content {
  display: none;
  padding-left: var(--spacing-l); /* 16px */
  padding-top: var(--spacing-s);  /* 8px */
}

.tree-node--expanded > .tree-node__content {
  display: block;
}

/* Rotazione chevron quando espanso */
.tree-node--expanded > .tree-node__toggle .link__chevron {
  transform: rotate(180deg);
}

.tree-node__toggle .link__chevron {
  transition: transform var(--transition-fast);
}