Modern CSS FAQ

FAQ questions using only CSS

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<section class="faq-section">
    <input type="checkbox" id="q1">
    <label for="q1">Nunc nec arcu ac lacus?</label>           
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac magna non augue porttitor scelerisque ac id diam.</p>
    <p>Mauris elit velit, lobortis sed interdum at, vestibulum vitae libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque iaculis ligula ut ipsum mattis viverra. </p>   
</section>
    
    <section class="faq-section">
    <input type="checkbox" id="q4">
    <label for="q4">hahhhahahaha?</label>           
    <p>Yo man </p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q2">
    <label for="q2">Fusce nec nibh purus?</label>           
    <p>Aliquam et tellus vel neque fringilla posuere ac non mi. Nunc mauris nunc, sollicitudin in pellentesque sed, rhoncus in nibh. Ut vestibulum consectetur tincidunt. Vestibulum facilisis tempus tortor ut ultricies. Fusce aliquet placerat massa nec tempor.</p>
    <p>Phasellus vel nunc id nisl lacinia vehicula. Maecenas quis nunc eros.</p>    
    <p>Pellentesque urna massa, aliquet a sagittis vel, eleifend ut est. Suspendisse gravida ultricies nisi, in euismod tortor consectetur ut. Phasellus sagittis, turpis quis cursus aliquet, purus dolor dictum tellus, vel dignissim lorem nibh ornare eros.</p>   
</section>

<section class="faq-section">
    <input type="checkbox" id="q3">
    <label for="q3">Vivamus posuere odio non est?</label>           
    <p>Cras semper nisi quis purus aliquam ultricies. Vivamus pellentesque ipsum non magna ultricies sed iaculis mi iaculis.</p>
    <p>Donec eu velit lectus. Aenean justo quam, faucibus non vestibulum et, tincidunt sed felis. Vivamus vehicula egestas nisl ut lacinia. Suspendisse tempor adipiscing mi....

CSS

body {
    margin: 40px auto;
    width: 550px;
    font-family: 'Yanone Kaffeesatz';
    font-size: 16px;
    background: #444 url("http://jenniferperrin.com/image/background.gif");
}

.faq-section {
    margin: 40px 0;
    position: relative;
}

.faq-section p {
    display: none;
    margin: 4px 10px;
}    

.faq-section input {
    position: absolute;
    z-index: 2;
    cursor: pointer;
    opacity: 0;            
    display: none\9; /* IE8 and below */
    margin: 0;            
    width: 100%;
    height: 36px;
}                

.faq-section label+p {
    display: block;    
    color: #999;
    font-size: .85em;
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;
    /* Clipping text */
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;                        
}

.faq-section input[type=checkbox]:checked~p {
    display: block;
    color: #efefef;
    font-size: 1em;
    /* restore clipping defaults */
    text-overflow: clip;
    white-space: normal;
    overflow: visible;    
}

.faq-section label {
    font-size: 1.2em;
    color: #efefef;
    background: #222;
    display: block;
    position: relative;
    height: 20px;
    padding: 7px 10px;
    font-weight: bold;
    border: 1px solid #222;
    border-left: 3px solid #bf4c24;
    text-shadow: 0 1px 0 rgba(34,34,34,.5);
    -webkit-transition: all .15s ease-out;
    -moz-transition: all .15s ease-out;
    -ms-transition: all .15s ease-out;
    -o-transition: all .15s ease-out;
    transition: all .15s ease-out;            
}

.faq-section label::-moz-selection { /* remove text selection when toggle-ing */
    background: none;
}

.faq-section label::selection {
    background: none;
}

.faq-section label:hover {
    background: #444;
}

.faq-section input[type=checkbox]:checked~label {
    border-color: #bf4c24;            
   ...