¡Hay varias formas de hacerlo! Por ejemplo, lo siguiente. El HTML tiene este aspecto. Hay un div, que hace clic y un div debajo que se expandirá. Esto solo es posible con el pseudo-selector: objetivo.
<div class="accordion">
<div id="one" class="section">
<h3>
<a href="#one">Heading 1</a>
</h3>
<div>
<p>Content</p>
</div>
</div>
<div id="two" class="section">
<h3>
<a href="#two">Heading 2</a>
</h3>
<div>
<p>Content</p>
</div>
</div>
</div>
.accordion h3 + div {
height: 0;
overflow: hidden;
-webkit-transition: height 0.3s ease-in;
-moz-transition: height 0.3s ease-in;
-o-transition: height 0.3s ease-in;
-ms-transition: height 0.3s ease-in;
transition: height 0.3s ease-in;
}
.accordion :target h3 + div {
height: 100px;
}
.accordion .section.large:target h3 + div {
overflow: auto;
}
He hecho un violín de trabajo para usted. Tener una mirada en ella: Check me out!
¿Te gusta un menú desplegable? –
No es exactamente un menú desplegable, sino un menú de acordeón. – hkasera