Como utilizar <details> e <summary>?

A utilização dessas tags é bem simples, basta cobrir algum conteúdo com "details" e utilizar "summary" dentro.

Dessa forma:

Como fazer a estilização?

Você pode optar por utilizar classes, mas aqui vamos fazer a chamada direto dos elementos no CSS:

details{
}
summary{
}
summary::marker{
}

Repare que, além de details e summary, também utilizamos o "::marker", que é referente aos estilos daquela seta que vem por padrão.

Caso você deseja escondê-la, basta utilizar o "display: none":

summary::marker{
  display: none;
}

Além disso, você também pode utilizar duas notações CSS, para estilos diferentes quando o conteúdo estiver aberto ou não, dessa forma:

details:not([open]){
}
details[open]{
}

Bônus: 3 modelos para você se inspirar

Em construção 🚧