Acordeón vertical basado en Flexbox con CSS puro

Vista prévia

Descripción

Una interfaz de usuario de acordeón vertical suave y sensible que expande el panel de acordeón actual en el mouse Hover, construido usando CSS puro y modelo Flexbox.

Funcionamiento

Cree los paneles de acordeón como sigue:

<article>

<h2>Section 1</h2>

<div>


<h3>Section 1</h3>

</div>
</article>

<article>

<h2>Section 2</h2>

<div>


<h3>Section 2</h3>

</div>
</article>

<article>

<h2>Section 3</h2>

<div>


<h3>Section 3</h3>

</div>
</article>

...

El diseño principal CSS:

html, body, div + div {

width: 100vw;

height: 100vh;
}

div + div {

list-style: none;

position: relative;

display: flex;

flex-direction: row;

flex-wrap: nowrap;

align-items: stretch;

overflow: hidden;
}

article div {

text-align: left;

width: 58vw;
}

El CSS para la interacción Hover.

div + div:hover article {

flex: initial;

width: 10%;
}

div + div article:hover { width: 60%; }

article > div {

opacity: 0;

transition: opacity .2s ease 0;
}

div + div article:hover > div {

opacity: 1;

transition: opacity .3s ease .3s;
}

Haga que el acordeón responda completamente:

@media (max-width: 900px) {

div + div article { padding: 2vh 3vw; }

div + div article > h2 {

transform: rotate(90deg);

bottom: 23vh;

min-width: 12em;

text-align: left;

transform: rotate(-90deg);

transform-origin: 0 0 0;

opacity: 1;
}

div + div article:hover > h2 { opacity: 0; }

article div {

max-height: calc(72%);

overflow-y: auto;
}
}