Introducción: a veces tenemos mucho contenido para mostrar y para que el sitio web se vea bonito y corto, usamos los cuadros de texto plegables. Los cuadros de texto plegables son esa división que es la combinación de encabezado y contenido, generalmente solo el encabezado es visible, pero cuando se presiona, se muestra el contenido.
Configuración:
- Tienes que importar el componente amp-accordion en tu encabezado para usar esta etiqueta.
<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"> </script>
- Para hacer un encabezado dinámico, use este código CSS que se menciona a continuación. Este código cambiará dinámicamente el contenido del encabezado siempre que la división se expanda o se contraiga.
amp-accordion section[expanded] .show-more {
display: none;
}
amp-accordion section:not([expanded]) .show-less {
display: none;
}
Ejemplo:
<!doctype html>
<html <img draggable="false"
class="emoji"
alt=""
src=
"https://s.w.org/images/core/emoji/11/svg/26a1.svg">
<head>
<meta charset="utf-8">
<script async src=
"https://cdn.ampproject.org/v0.js">
</script>
<!--
Import the `amp-accordion` component in the header.
-->
<script async custom-element="amp-accordion"
src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js">
</script>
<link rel="canonical" href=
"https://amp.dev/documentation/examples/components/amp-accordion/index.html">
<meta name="viewport"
content="width=device-width,
minimum-scale=1, initial-scale=1">
<style amp-boilerplate>
body {
-webkit-animation:-amp-start 8s steps(1, end) 0s 1 normal both;
-moz-animation:-amp-start 8s steps(1, end) 0s 1 normal both;
-ms-animation:-amp-start 8s steps(1, end) 0s 1 normal both;
animation:-amp-start 8s steps(1, end) 0s 1 normal both
}
@-webkit-keyframes -amp-start{
from{
visibility:hidden
}
to{
visibility:visible
}
}@-moz-keyframes -amp-start{
from{
visibility:hidden
}
to{
visibility:visible
}
}
@-ms-keyframes -amp-start{
from{
visibility:hidden
}
to{
visibility:visible
}
}
@-o-keyframes -amp-start{
from{
visibility:hidden
}
to{
visibility:visible
}
}
@keyframes -amp-start{
from{
visibility:hidden
}
to{
visibility:visible
}
}
</style>
<noscript>
<style amp-boilerplate>
body{
-webkit-animation:none;
-moz-animation:none;
-ms-animation:none;
animation:none
}
</style>
</noscript>
<title>GeeksForGeeks | amp-accordion</title>
<style amp-custom>
h1, h4{
color: forestgreen;
}
section {
color: crimson;
}
amp-accordion section[expanded] .show-more {
display: none;
}
amp-accordion section:not([expanded]) .show-less {
display: none;
}
/* these styles are not required for the samples to work */
:root {
--space-2: 1rem;
/* 16px */
}
amp-accordion.sample {
margin: var(--space-2);
}
</style>
<meta name="robots" content="noindex, nofollow">
</head>
<body>
<!-- Body of the Page -->
<center><h1>
Geeks For Geeks
</h1></center>
<amp-accordion class="sample"
disable-session-states>
<section>
<h4><span class="show-more">
Click it Geek!!
</span>
<span class="show-less">
Welcome to GeeksForGeeks
</span></h4>
<p>GeeksforGeeks is a Computer Science portal for geeks.
It contains well written, well thought and well explained
computer science and programming articles, quizzes etc. </p>
</section>
</amp-accordion>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por aditya_taparia y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA