Click open/close Dropdown in pure CSS

dabblet.css

/* Click open/close Dropdown in pure CSS */


/* Disclaimer: Not the most semantic
   thing in the universe. */
   
/* Forked from original idea
   http://jsfiddle.net/paullferguson/Sv54G/3/ */


.tabs {
    position: relative;
    clear: both;
    margin: 50px;
}
.tab {
    float: left;
    position: relative;
}
.tab label {
    background: linear-gradient(#eee, #ccc);
    padding: 10px 30px;
    cursor: pointer;
    text-align: center;
    display: block;
    position: relative;
}
.tab label i {
    font-style: normal;
    font-size: 10px;
    color: #aaa;
}
.tab [type=radio] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    margin: 0;
    z-index: 1;
}
.content {
    position: absolute;
    top: 100%;
    opacity: 0;
    left: 0;
    background: #333;
    color: white;
    padding: 20px;
}
.content ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
.content a {
    color: white;
    display: block;
    white-space: nowrap;
    text-decoration: none;
    border-bottom: 1px solid #999;
    padding: 5px;
}  
[type=radio]:checked ~ label {
    z-index: 2;
}
[type=radio]:checked ~ label ~ .content {
    z-index: 1;
    opacity: 1;
}


.close-tab {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.close-tab label {
    background: #333;
    color: white;
}
[type=radio]:checked ~ label ~ .close-tab {
    z-index: 3;
}

dabblet.html

<div class="tabs">


    <div class="tab">
        <input type="radio" id="tab-1" name="tab-group-1">
        <label for="tab-1">List 1 <i>▼</i></label>
        <div class="tab close-tab">
            <input type="radio" id="tab-close" name="tab-group-1">
            <label for="tab-close">List 1 <i>▲</i></label>
        </div>


        <div class="content">
		<ul>
		  <li><a href="#">Menu Item #1</a></li>
		  <li><a href="#">Menu Item #2</a></li>
		  <li><a href="#">Really Long Menu Item #3</a></li>
		  <li><a href="#">Menu Item #4</a></li>
		  <li><a href="#">Menu Item #5</a></li>
        	</ul>
        </div>
    </div>


    <div class="tab">
        <input type="radio" id="tab-2" name="tab-group-1">
        <label for="tab-2">List 2 <i>▼</i></label>
        <div class="tab close-tab">
            <input type="radio" id="tab-close" name="tab-group-1">
            <label for="tab-close">List 2 <i>▲</i></label>
        </div>


        <div class="content">
            Repeats the input and label.  Gnarly, but it enables the functionality.
        </div>
    </div>


    <div class="tab">
        <input type="radio" id="tab-3" name="tab-group-1">
        <label for="tab-3">List 3 <i>▼</i></label>
        <div class="tab close-tab">
            <input type="radio" id="tab-close" name="tab-group-1">
            <label for="tab-close">List 3 <i>▲</i></label>
        </div>


        <div class="content">
            Worked on iOS 5. And modern browsers of course. Probably something like IE 9+ too.
        </div>
    </div>


</div>

settings.json

{"view":"split-vertical","prefixfree":"1","page":"result"}