Basic CSS3 Accordion

by Emmanuel Garcia

HTML

<h3>Toggle</h3>
<div class="accordion">
    <input type="checkbox">
    <label style="background-color:#0193DD">SAPPHIRE / ZAFIRO</label>
    <div> <ul class="sub-menu">
<li>
    Weekly / Semana - 130,000<br>
        Fri-Sat / Vier-Sáb - 26,000<br>
        Sun-Thurs / Dom-Jue - 15,600<br><br>
        WEEKS / SEMANAS
        <br>
        1-15, 49-50 </li>
<li><a href="http://www.google.com/images?q=2018+Alfa Romeo 4C" target="_black">-Alfa Romeo 4C</a></li>
<li><a href="http://www.google.com/images?q=2018+Audi A8" target="_black">-Audi A8</a></li>
</ul></div>
    
    <input type="checkbox">
    <label style="background-color:#0193DD">Compact Cars</label>
    <div><ul class="sub-menu"><li><a href="http://www.google.com/images?q=2018+Chevrolet Bolt" target="_black">-Chevrolet Bolt</a></li>
<li><a href="http://www.google.com/images?q=2018+Chevrolet Cruze" target="_black">-Chevrolet Cruze</a></li>
<li><a href="http://www.google.com/images?q=2018+Chevrolet Volt" target="_black">-Chevrolet Volt</a></li>
<li><a href="http://www.google.com/images?q=2018+Ford Focus" target="_black">-Ford Focus</a></li>
<li><a href="http://www.google.com/images?q=2018+Honda Civic" target="_black">-Honda Civic</a></li>
<li><a href="http://www.google.com/images?q=2018+Honda Insight" target="_black">-Honda Insight</a></li>
<li><a href="http://www.google.com/images?q=2018+Hyundai Elantra" target="_black">-Hyundai Elantra</a></li>
<li><a href="http://www.google.com/images?q=2018+Hyundai Ioniq" target="_black">-Hyundai Ioniq</a></li>
<li><a href="http://www.google.com/images?q=2018+Hyundai Veloster" target="_black">-Hyundai Veloster</a></li>
<li><a href="http://www.google.com/images?q=2018+Kia Forte" target="_black">-Kia Forte</a></li>
<li><a href="http://www.google.com/images?q=2018+Kia Soul" target="_black">-Kia Soul</a></li>
<li><a href="http://www.google.com/images?q=2018+Mazda Mazda3" target="_black">-Mazda Mazda3</a></li>
<li><a href="http://www.google.com/images?q=2018+Nissan Leaf"...

CSS

.accordion label{border:5px;}
.accordion li{list-style-type:none;line-height:25px;}
.accordion li :hover{background-color:#235ea6;padding:3px;color:white;}
.accordion a{color:#235ea6;text-decoration:none;}
.accordion{position:relative;background-color:white;}
.accordion > input{display:block;margin:0 0;width:100%;height:30px;position:relative;cursor:pointer;opacity:0;filter:alpha(opacity=0);}
.accordion > label{display:block;font:bold 12px/30px Arial,Sans-Serif;background-color:#235ea6;color:white;margin:-30px 0 0 0;padding:0 15px;}
.accordion > div{padding:0px 0px;display:none;}
.accordion > input:checked + label{background-color:#19a87a;}
.accordion > input:hover + label{background-color:#19a87a;color:white;}
.accordion > input:checked + label + div{display:block;}