CSS Accordion - Responsive

by abhitalks

HTML

<div class="accordion">
    <input id="i12" name="handle2" type="checkbox" />
    <label for="i12">One</label>
    <div class="content">Lorem ipsum</div>
    <input id="i22" name="handle2" type="checkbox" />
    <label for="i22">Two</label>
    <div class="content">Lorem ipsum</div>
    <input id="i32" name="handle2" type="checkbox" />
    <label for="i32">Three</label>
    <div class="content">Lorem ipsum</div>
    <input id="i42" name="handle2" type="checkbox" />
    <label for="i42">Four</label>
    <div class="content">Lorem ipsum</div>
</div>

CSS

* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: sans-serif; font-size: 1em; }
div.accordion { 
    display: inline-block; vertical-align: top;
    width: 240px; margin: 16px; border: 1px solid #ddd; 
}
div.accordion label:last-of-type { border: none; }
input { display: none; }
input + label { 
    display: block; background-color: #eee; 
    padding: 8px; cursor: pointer; border-bottom: 1px solid #ddd;
    font-family: 'segoe ui', sans-serif; font-weight: 300; transition: all 0.25s;
}
input + label:hover { background-color: #ddd; }
input + label::before { 
    content: '→'; 
    display: inline-block; margin-right: 6px;
    font-family: calibri, sans-serif; font-weight: 400; transition: all 0.5s;
}
div.content {
    overflow: hidden; height: 0px; padding: 0px;
    font-family: calibri, sans-serif; font-weight: 300; 
    background-color: rgba(250,250,250,0.6); transition: all 0.5s;
}
input:checked + label + div.content { height: 64px; padding: 6px; }
input:checked + label { background-color: #ddd; }
input:checked + label::before { font-weight: 600; transform: rotate(90deg); }

@media screen and (min-width: 768px) {
    div.content { height: 64px; padding: 6px; }
    input + label::before { font-weight: 600; transform: rotate(90deg); }
}