Acordeón liso en HTML puro y CSS

Vista prévia

Descripción

Un componente de acordeón HTML/CSS puro que utiliza transiciones CSS3 para animaciones suaves al expandir/contraer.

Funcionamiento

La estructura básica de HTML para el acordeón. En este caso, vamos a usar la casilla de verificación HTML y la etiqueta para los Toggles.

<div class="block">

<div>


<input type="radio" name="item" id="item-one" checked hidden />


<label for="item-one">Item 1</label>


<div>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>


</div>

</div>

<div>


<input type="radio" name="item" id="item-two" hidden />


<label for="item-two">Item 2</label>


<div>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>


</div>

</div>

<div>


<input type="radio" name="item" id="item-three" hidden />


<label for="item-three">Item 3</label>


<div>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>


</div>

</div>

<div>


<input type="radio" name="item" id="item-four" hidden />


<label for="item-four">Item 4</label>


<div>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>


</div>

</div>

<div>


<input type="radio" name="item" id="item-five" hidden />


<label for="item-five">Item 5</label>


<div>



<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis praesentium, perspiciatis optio repellat quos maiores cum, tempore veniam ratione delectus quae ex laudantium modi. Quam sequi illo laudantium, harum odio.</p>


</div>

</div>
</div>

Los estilos CSS y CSS3 primarios.

.block {

max-width: 400px;

width: 100%;

height: 100%;

float: left;

padding: 15px;

z-index: 10;

background-color: #fafafa;

overflow: hidden;

margin: 50px auto;
}
@media screen and (max-width: 599px) {

.block { max-width: 100%; }
}

.block > div {

display: block;

position: relative;

padding: 0 0 0 35px;

border-bottom: 1px solid white;

background-color: #e6e6e6;

color: black;
}

.block > div:nth-child(1):before {

content: "1";

width: 20px;

font-weight: bold;

text-align: center;

position: absolute;

left: 0;

top: 0;

background-color: #466970;

padding: 7.5px;

margin: 0;

color: white;
}

.block > div:nth-child(2):before {

content: "2";

width: 20px;

font-weight: bold;

text-align: center;

position: absolute;

left: 0;

top: 0;

background-color: #466970;

padding: 7.5px;

margin: 0;

color: white;
}

.block > div:nth-child(3):before {

content: "3";

width: 20px;

font-weight: bold;

text-align: center;

position: absolute;

left: 0;

top: 0;

background-color: #466970;

padding: 7.5px;

margin: 0;

color: white;
}

.block > div:nth-child(4):before {

content: "4";

width: 20px;

font-weight: bold;

text-align: center;

position: absolute;

left: 0;

top: 0;

background-color: #466970;

padding: 7.5px;

margin: 0;

color: white;
}

.block > div:nth-child(5):before {

content: "5";

width: 20px;

font-weight: bold;

text-align: center;

position: absolute;

left: 0;

top: 0;

background-color: #466970;

padding: 7.5px;

margin: 0;

color: white;
}

.block > div input + label {

cursor: pointer;

display: block;

padding: 7.5px 15px;

background-color: #a2c0c6;

-webkit-transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;

transition: background-color 0.25s ease-in-out 0.5s, color 0.25s ease-in-out 0.5s;

color: black;
}

.block > div input ~ div {

visibility: hidden;

max-height: 0;

padding: 0;

opacity: 0;

-webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s;

transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.25s, padding 0s ease-in-out 0s;
}

.block > div input ~ div p { padding: 0 15px; }

.block > div input:checked + label {

background-color: #739fa8;

-webkit-transition: background-color 0s ease-in-out 0s;

transition: background-color 0s ease-in-out 0s;

color: black;
}

.block > div input:checked ~ div {

display: block;

opacity: 1;

visibility: visible;

max-height: 200px;

padding: 15px 0;

-webkit-transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;

transition: all 0.5s ease-in-out 0.2s, opacity 0.25s ease-in-out 0.5s, padding 0s ease-in-out 0s;
}