Mettre en page la balise html details

Mise en page de la balise <details> avec LESS

Dans ce tutoriel, nous allons voir comment utiliser la balise <details> en HTML et comment la styliser avec LESS pour créer un affichage interactif élégant et fonctionnel.

Prérequis

Assurez-vous d’avoir une compréhension de base de HTML et CSS. Une familiarité avec LESS sera également utile pour suivre ce tutoriel.

Structure HTML de base

Nous commençons par définir notre balise <details> avec un élément <summary> :

<details>
  <summary>Cliquez ici pour plus d'informations</summary>
  <div class="details-content">
    Ici, vous pouvez ajouter du contenu détaillé que l'utilisateur pourra voir en cliquant sur le résumé ci-dessus.
  </div>
</details>

Mise en page avec LESS

Maintenant, utilisons votre code LESS pour styliser notre balise <details>. Ce code permet de masquer le marqueur par défaut du <summary>, d’ajouter une flèche personnalisée, et de changer la couleur du texte et de la flèche au survol et lorsque les détails sont ouverts.

// ------- details
details summary::-webkit-details-marker {
  display:none;
}
details {
  margin: 1rem 0;
  background-color: #FFF;
  > .details-content {
    margin-top: 1rem;
    background-color: #FFF;
  }
  summary {
    text-transform: uppercase;
    padding: 1rem 1rem 1rem 2.2rem;
    display: block;
    background: #333;
    position: relative;
    cursor: pointer;
    color: #FFF;
    transition: color 0.3s;
    
    &:before {
      content: '';
      border-width: .4rem;
      border-style: solid;
      border-color: transparent transparent transparent #fff;
      position: absolute;
      top: 1.3rem;
      left: 1rem;
      transform: rotate(0);
      transform-origin: .2rem 50%;
      transition: .25s transform ease, border 0.3s;
    }
  }
  &:hover {
    summary {
      color: #FF8C00;
      &:before {
        border-color: transparent transparent transparent #FF8C00;
      }
    }
  }
}

details[open] > summary {
  color: #FF8C00;
  
  &:before {
    transform: rotate(90deg);
    border-color: transparent transparent transparent #FF8C00;
  }
}

J’espère que ce tutoriel vous aidera à démontrer efficacement comment styliser la balise <details> avec LESS.