codice:
//---------------------------------------------------------------------------------------------------------------------------------
// si inizializza il collapse per la tabella dei badge

// Funzione per espandere/collassare i dettagli del badge

function toggleBadgeDetails(event, idDipendente) {
  event.stopPropagation(); // Previene la propagazione dell'evento

  const icon = event.target; // 'icon' definita correttamente qui come l'elemento su cui si è cliccato.
  const tr = icon.closest('tr');
  const dipId = tr.getAttribute('data-id');

  const isExpanded = icon.classList.contains("fa-arrow-circle-o-down"); // Controlla se l'icona indica che i dettagli sono attualmente espansi.
  icon.classList.toggle("fa-arrow-circle-o-right"); // Alterna tra indicare un dettaglio non espanso
  icon.classList.toggle("fa-arrow-circle-o-down"); // e un dettaglio espanso.

  const detailsRowId = "details-row-" + dipId;
  let detailsRow = document.getElementById(detailsRowId);
  if (!detailsRow) {
      detailsRow = document.createElement("tr");
      detailsRow.id = detailsRowId;
      detailsRow.innerHTML = `<td colspan="11"><div id='details-content-${dipId}' class='details-content'>Caricamento...</div></td>`;
      tr.parentNode.insertBefore(detailsRow, tr.nextSibling);
      fetchBadgeDetails(dipId, detailsRowId);
  } else {
      const detailsContent = document.getElementById(`details-content-${dipId}`);
      detailsContent.parentNode.parentNode.style.display = isExpanded ? "none" : "table-row";
  }
}