El <details> y <summary> Los elementos en HTML son útiles para hacer que el contenido cambie por fragmentos de texto. De forma predeterminada, verá el <summary> elemento con un triángulo de alternancia (▶ ︎) junto a él. Haga clic en eso para expandir el resto del texto dentro del <details> elemento.
Pero digamos que quieres poder hacer clic para abrirlo y eso es todo. Se acabó la interactividad. Vi esto usado en uno de esos diseños de artículos “Leer más”, donde haces clic en el botón “Leer más” y el artículo se expande, pero no hay vuelta atrás.
Prólogo de esto diciendo que no estoy seguro de que esta sea una gran idea en general. Eliminar controles simplemente no se siente bien, ni abofetear demasiado contenido importante dentro de un <details> elemento. Pero, bueno, la web es un lugar grande y nunca se sabe lo que puede necesitar. El hecho de que esto se pueda hacer en unas pocas líneas de HTML / CSS es convincente y podría reducir la necesidad de soluciones más pesadas.
El truco principal aquí es ocultar el resumen cuando los detalles están abiertos.
details[open] summary {
display: none;
}Eso es realmente.