Accordéon en CSS

Petite expérimentation toute simple sur la manière d'obtenir un effet accordéon en css uniquement.

Pane 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere arcu rutrum lorem cursus rhoncus. Phasellus eu condimentum neque. Nulla facilisi. Morbi in nisi id dolor eleifend bibendum a sit amet dolor. Ut leo diam, fermentum quis molestie nec, fermentum sit amet mauris. Cras sed quam ac nulla laoreet venenatis sit amet in tortor. Donec a tortor vitae urna volutpat pretium blandit vel ante. Curabitur tempus metus et sem venenatis dictum! Nam bibendum rhoncus est id dignissim. Donec ac nibh at lacus feugiat pharetra feugiat in libero. Ut id pharetra sem.

Pane 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere arcu rutrum lorem cursus rhoncus. Phasellus eu condimentum neque. Nulla facilisi. Morbi in nisi id dolor eleifend bibendum a sit amet dolor. Ut leo diam, fermentum quis molestie nec, fermentum sit amet mauris. Cras sed quam ac nulla laoreet venenatis sit amet in tortor. Donec a tortor vitae urna volutpat pretium blandit vel ante. Curabitur tempus metus et sem venenatis dictum! Nam bibendum rhoncus est id dignissim. Donec ac nibh at lacus feugiat pharetra feugiat in libero. Ut id pharetra sem.

Pane 3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent posuere arcu rutrum lorem cursus rhoncus. Phasellus eu condimentum neque. Nulla facilisi. Morbi in nisi id dolor eleifend bibendum a sit amet dolor. Ut leo diam, fermentum quis molestie nec, fermentum sit amet mauris. Cras sed quam ac nulla laoreet venenatis sit amet in tortor. Donec a tortor vitae urna volutpat pretium blandit vel ante. Curabitur tempus metus et sem venenatis dictum! Nam bibendum rhoncus est id dignissim. Donec ac nibh at lacus feugiat pharetra feugiat in libero. Ut id pharetra sem.

Démonstration.
<div class="accordion">
    <div class="pane">
        <div class="hd" tabindex="0">Pane 1</div>
        <div class="bd">
            <!-- contenu du panneau -->
        </div>
    </div>
    <div class="pane">
        <div class="hd" tabindex="0">Pane 2</div>
        <div class="bd">
            <!-- contenu du panneau -->
        </div>
    </div>
    <div class="pane">
        <div class="hd" tabindex="0">Pane 3</div>
        <div class="bd">
            <!-- contenu du panneau -->
        </div>
    </div>
</div>
Code HTML.
.accordion {
    border-width: 0 1px 1px;
    border-style: solid;
    overflow: hidden;
}
.accordion .pane {
    padding: 0;
    margin: 0;
    overflow: hidden;
}
.accordion > .pane > .hd {
    border-width: 1px 0;
    border-style: solid;
    padding: 5px 10px;
    margin: 0;
    font-weight: bold;
    cursor: pointer;
}
.accordion > .pane > .hd:after {
    display: inline-block;
    float: right;
    font-family: 'IconicCustom', sans-serif;
    content: "\e083";
}
.accordion > .pane > .hd:focus:after,
.accordion > .pane > .hd[data-open="true"]:after {
    content: "\e081";
}
.accordion > .pane > .hd > * {
    font-size: 12px;
    font-weight: bold;
    margin: 0;
}
.accordion > .pane > .bd {
    margin: 0;
    padding: 0 20px;
    height: 0;
    overflow: auto;
    -webkit-transition: height 0.5s ease-in-out 0s;
       -moz-transition: height 0.5s ease-in-out 0s;
         -o-transition: height 0.5s ease-in-out 0s;
            transition: height 0.5s ease-in-out 0s;
}
.accordion > .pane > .hd:focus + .bd {
    height: 250px;
    -webkit-transition: height 0.5s ease-in-out 0s;
       -moz-transition: height 0.5s ease-in-out 0s;
         -o-transition: height 0.5s ease-in-out 0s;
            transition: height 0.5s ease-in-out 0s;
}
Code css.