Pure CSS: Collapse

http://www.felipefialho.com/css-components/index.html#component-collapse

by mrgiao

HTML

<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<ul class="collapse-list">
    <li>
        <input class="collapse-open" type="checkbox" id="collapse-1">
        <label class="collapse-btn" for="collapse-1">Upload an image</label>
        <div class="collapse-painel">
            <div class="collapse-inner">
                <ol>
                    <li>Visit <a href="http://images.google.com/">images.google.com</a> or click the camera icon in the search box on any Images results page
                        <img src="//lh5.ggpht.com/xpDi5LL0ccSl7OxR__CTD_gm0bYAdE3egEL7vkdf5Z9kPAVNRm2wpnGNk8w7fA=w26-h18" width="26" height="18" alt="camera icon" title="camera icon">.</li>
                    <li>Click <strong>Upload an image</strong>.</li>
                    <li>Click <strong>Choose file</strong>.</li>
                    <li>Select the image from your computer.</li>
                </ol>
            </div>
        </div>
    </li>
    <li>
        <input class="collapse-open" type="checkbox" id="collapse-2">
        <label class="collapse-btn" for="collapse-2">Drag & drop an image into the search box</label>
        <div class="collapse-painel">
            <div class="collapse-inner">
                <ol>
                    <li>Visit <a href="http://images.google.com/">images.google.com</a>.</li>
                    <li>On your computer, click the image you want to search for.</li>
                    <li>While holding down the mouse, drag the image into the search box.</li>
                </ol>
            </div>
        </div>
    </li>
    <li>
        <input class="collapse-open" type="checkbox" id="collapse-3">
        <label class="collapse-btn" for="collapse-3">Search using an image</label>
        <div class="collapse-painel">
            <div...

SCSS

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,300italic,400italic,500,500italic,700,700italic,900,900italic,100italic,100);

body {
    font-family: "Roboto";
    font-size: 15px;
    padding: 20px;
}

.collapse-list {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
    border-bottom: 1px solid #e0e0e0;
}

.collapse-open {
    display: none;
}

.collapse-painel {
    visibility: hidden;
    max-height: 0;
    opacity: 0;
    transition: max-height .1s,
    visibility .3s,
    opacity .3s;
}

.collapse-open:checked ~ .collapse-painel {
    max-height: 100%;
    opacity: 100;
    visibility: visible
}

.collapse-list li {
    margin-bottom: 0;
}

.collapse-list .collapse-btn {
    border-top: 1px solid #e0e0e0;
    cursor: pointer;
    display: block;
    padding: 15px 10px;
    margin-bottom: 0;
    color: #4285f4;
    font-weight: normal;
    transition: background-color .2s ease;
}

.collapse-list .collapse-btn:hover {
    background: #eee;
}

.collapse-open ~ .collapse-btn:before {
    content: "↓";
    float: right;
}

.collapse-open:checked ~ .collapse-btn:before {
    content: "↑";
}

.collapse-list .collapse-inner {
    padding: 10px
}

JavaScript

Pure CSS Components
http: //www.felipefialho.com/css-components/index.html#component-collapse