Se puede ver en muchos sitios web como leer más botones que contienen un enlace. Estas cosas se expanden cuando el usuario hace clic en el enlace o botón Leer más y luego, después de expandirse, no había opción para colapsar el contenido expandido. En este artículo, eliminaremos esa opción de colapso. Necesitábamos dos elementos <detalles> y <resumen> para crear ese tipo de interfaz, aplicando un CSS «display: none;» propiedad.
Esta función no es una buena opción, pero pocos desarrolladores solicitaron diseñar este tipo de interfaz aplicando el CSS display:none; propiedad. Podemos eliminar la opción de colapsar del resumen .
El siguiente ejemplo ilustra el enfoque anterior:
Sintaxis:
<style>
details[open] summary {
display: none;
}
<style>
Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
Create a details element that opens
but never closes
</title>
<style>
.container {
text-align: center;
}
h1 {
color: green;
}
details[open] summary {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<p>
This paragraph will expand but not
collapsed after expanding
</p>
<details>
<summary>Expand</summary>
A Computer Science Portal for Geeks
</details>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA