Accordion w wydaniu css

Szybki tutorial ze zbudowaniem accordiona z użyciem css i html, bez js, skierowany raczej do początkujących - chociaż, jak zauważam, nawet doświadczeni koderzy zapominają o tych "triczkach".

Na początek szkielet, załóżmy, że chcemy 3 panele:

<ul class="m-footer clearfix2">  
    <li class="item">
        <label class="label" for="tab1">Idea</label>
        <input class="radio" type='radio' name='a' id='tab1' checked='checked'>
        <div id="tab-content1" class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>
    <li class="item">
        <label class="label" for='tab2'>Idea</label>
        <input class="radio" type='radio' name='a' id='tab2'>
        <div id="tab-content2" class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>   
    <li class="item">
        <label class="label" for='tab3'>Idea</label>
        <input class="radio" type='radio' name='a' id='tab3'>
        <div id="tab-content3" class="content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        </div>
    </li>   
</ul>  

W celu aktywowania i pokazywania kontenetów z treścią wykorzystamy input type="radio" i własność checked.
Gdy input będzie zaznaczony pokażemy przypisany mu kontener z treścią (bądź cokolwiek innego). Używam SCSS.

.m-footer_label {
    font: bold 14px/1 "Quicksand", sans-serif;
    text-transform: uppercase;
    padding: 0 0 5px;
    margin-bottom: 10px;
    border-bottom: 1px solid $cl-green; 
    display: block;
}
.m-footer_label + input[type='radio'] {
    display: none;
}
.m-footer_label + input[type='radio']:checked + .m-footer_content {
    display: block;
    height: auto;
    &:after {
        content: " - ";
    }
}

Przykład online można zobaczyć na Codepen.

Swoją drogą w podobny sposób można zrobić customowe checkboxy - wykorzystując ~. Czyli (oczywiście dostosowując pod siebie):

<label for="input"><input name="input" id="input" type="checkbox"><span></span> label</label>


input[type="checkbox"] {
    display: none:
}
input[type="checkbox"]:checked ~ span {
    background: #000;
}

Demo: Codepen