acordion archivos - Frexus https://www.frexus.dev/tag/acordion/ Generando Valor Agreado Wed, 16 Nov 2022 07:40:00 +0000 en hourly 1 https://wordpress.org/?v=6.9.4 https://www.frexus.dev/wp-content/uploads/2024/03/cropped-Captura-de-Pantalla-2022-12-26-a-las-15.52.42-32x32.png acordion archivos - Frexus https://www.frexus.dev/tag/acordion/ 32 32 215529362 Y un día te enteras de … https://www.frexus.dev/articulo/y-un-dia-te-enteras-de/ https://www.frexus.dev/articulo/y-un-dia-te-enteras-de/#respond Wed, 16 Nov 2022 07:40:00 +0000 https://ajgutierrez.com.mx/?p=1532 Se ha estado leyendo en los últimos días sobre html y css, es agradable los avances significativos que se ha tenido en ellos, ya que por dar un ejemplo para la creación clásica de un acordeón debería de usarse html, css y javascript, no es que este invalidado esa combinación para su uso. Sino que la existencia de las etiquetas details y summary de html ahorran un buen de tiempo y ya con el css se le da la mascará que uno desee y de cierta manera hasta los efectos dejo al calce un código fuente donde se usa un css para hacer un acordeón donde se tiene un div como contenedor y tres opciones donde se hace uso a las etiquetas antes mencionadas y el css que le da un aspecto más vistoso. A continuación se muestra el código css Seguidamente se deja el código html

La entrada Y un día te enteras de … se publicó primero en Frexus.

]]> Se ha estado leyendo en los últimos días sobre html y css, es agradable los avances significativos que se ha tenido en ellos, ya que por dar un ejemplo para la creación clásica de un acordeón debería de usarse html, css y javascript, no es que este invalidado esa combinación para su uso.

Sino que la existencia de las etiquetas details y summary de html ahorran un buen de tiempo y ya con el css se le da la mascará que uno desee y de cierta manera hasta los efectos dejo al calce un código fuente donde se usa un css para hacer un acordeón donde se tiene un div como contenedor y tres opciones donde se hace uso a las etiquetas antes mencionadas y el css que le da un aspecto más vistoso.

A continuación se muestra el código css

<style>
        .acordeon{
            background: #576beb;
            color: #FFFFFF;
            font-size: 12px;
        }
        details{
            cursor: pointer;
            background: #7686f0;
            padding: .5rem;
           border-radius: 6px;
           margin: .5rem;
        }
        summary{ 
            list-style: none; }
            summary::before{
            content: '∧';
            padding-right: 1rem;
        }
        details[open] summary::before{
            content: '∨';
        }
        details { position: relative; }
        details summary::before{
            position: absolute;
            font-size: .85rem;
            top: 10px;
           right: 12px;
</style>

Seguidamente se deja el código html

&lt;div class='acordeon'&gt;
        &lt;details&gt;
            &lt;summary&gt;Título uno&lt;/summary&gt;
            &lt;div&gt;
                 &lt;p&gt; Descripción del título uno &lt;/p&gt;
            &lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
            &lt;summary&gt; Título dos &lt;/summary&gt;
            &lt;div&gt;
                 &lt;p&gt; Descripción del título dos &lt;/p&gt;
           &lt;/div&gt;
        &lt;/details&gt;
        &lt;details&gt;
             &lt;summary&gt; Título tres &lt;/summary&gt;
             &lt;div&gt;
                 &lt;p&gt; Descripción del título tres &lt;/p&gt;
             &lt;/div&gt;
       &lt;/details&gt;
&lt;/div&gt;

La entrada Y un día te enteras de … se publicó primero en Frexus.

]]> https://www.frexus.dev/articulo/y-un-dia-te-enteras-de/feed/ 0 1532