Простой аккордеон

Accordion DemoHTMLCSS
<nav class="accordion dropdown-arrows">
    <input type="radio" name="accordion-radio-button" id="accordion-item-1" autocomplete="off">
    <section class="accordion-item">
        <label class="accordion-header" for="accordion-item-1">Question 1</label>
        <label class="closing" for="accordion-closing-button"></label>
        <div class="accordion-text"><p>
            Our. Forth winged meat second. Every was, lesser was abundantly fourth second appear own and god Kind.
        </p></div>
    </section>
    <input type="radio" name="accordion-radio-button" id="accordion-item-2" autocomplete="off">
    <section class="accordion-item">
        <label class="accordion-header" for="accordion-item-2">Question 2</label>
        <label class="closing" for="accordion-closing-button"></label>
        <div class="accordion-text"><p>
            Darkness you itself darkness, firmament living for abundantly face. Appear called waters called.
        </p></div>
    </section>
    <input type="radio" name="accordion-radio-button" id="accordion-item-3" autocomplete="off">
    <section class="accordion-item">
        <label class="accordion-header" for="accordion-item-3">Question 3</label>
        <label class="closing" for="accordion-closing-button"></label>
        <div class="accordion-text"><p>
            I, morning them can't to she'd us have replenish upon seed them i saw he female lights firmament our.
        </p></div>
    </section>

    <input type="radio" name="accordion-radio-button" id="accordion-closing-button" autocomplete="off">
</nav>

.accordion {
    width: 576px;
    margin: 0 auto;
}

.accordion input {
    display: none;
}

.accordion-item {
    position: relative;
}

.accordion-header {
    width: 100%;
    height: 50px;
    line-height: 50px;
    display: block;
    cursor: pointer;
    border-bottom: 1px solid #cecece;
    color: #333333;
}

.accordion-text {
    width: 100%;
    font-size: 11pt;
    color: #555555;
    display: block;
    height: 0;
    overflow: hidden;
    opacity: 0;
    position: relative;
    top: -10px;
}

.accordion-text p {
    padding: 10px 30px;
    line-height: 1.68em;
}

.closing {
    position: absolute;
    height: 50px;
    width: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
    display: none;
}

input:checked + .accordion-item {
    height: auto;
}

input:checked + .accordion-item .accordion-text,
input:checked + .accordion-item .closing {
    display: block;
}

input:checked + .accordion-item .accordion-text {
    height: auto;
    opacity: 1;
    top: 0;
}

.dropdown-arrows section .accordion-header {
    padding: 0 0 0 30px;
}

.dropdown-arrows section .accordion-header:before {
    position: absolute;
    display: block;
    content: '\203a';
    font-size: 18pt;
    left: 12px;
    top: -2px;
    color: #333333;
}

input:checked + section.accordion-item .accordion-header:before {
    transform: rotate(90deg);
    top: 1px;
}

Другие проекты