"accordion"
Bootstrap 3.0.0 Snippet by evarevirus

Post to Facebook Tweet this

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/chrisota/pen/qbVMva?limit=all&page=4&q=Accordion" /> <link href='https://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'> <style class="cp-pen-styles">*, *:before, *:after { box-sizing: border-box; } html, body { height: 100%; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: roboto, helvetica, arial, san-serif; color: #666; background: #e0e0e0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: inherit; } .hide { clip: rect(0 0 0 0); height: 1px; margin: -1px; padding: 0; position: absolute; width: 1px; } .accordion { background: #fff; width: 400px; border: 1px solid #e0e0e0; } .accordion-item { position: relative; width: 100%; border-bottom: 1px solid #e0e0e0; } .accordion-item:last-child { border-bottom: none; } .accordion-label { padding: 20px 0 20px 30px; width: 100%; display: block; font-size: 18px; } .accordion-label:hover { cursor: pointer; } .accordion-label:before { content: ''; position: absolute; height: 5px; width: 5px; top: 22px; left: 12px; display: inline-block; border-left: 5px solid #999; border-top: 5px solid transparent; border-bottom: 5px solid transparent; } input[type=checkbox]:checked ~ .accordion-label:before { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .accordion-child { margin: 0; overflow: hidden; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; opacity: 0; height: 0; -webkit-transform: scale(1, 0); transform: scale(1, 0); -webkit-transform-origin: center top; transform-origin: center top; } input[type=checkbox]:checked ~ .accordion-child { border: 1px solid #e0e0e0; margin: 0 -20px 15px -20px; background: #fff; box-shadow: 0 3px 6px 1px rgba(0, 0, 0, 0.16); padding: 30px; height: auto; opacity: 1; -webkit-transform: scale(1, 1); transform: scale(1, 1); } </style></head><body> <ul class="accordion"> <li class="accordion-item"> <input id="s1" class="hide" type="checkbox"> <label for="s1"class="accordion-label">First</label> <ul class="accordion-child"> <li> <label> <input type="checkbox"> Item 1 </label> </li> <li> <label> <input type="checkbox"> Item 2 </label> </li> </ul> </li> <li class="accordion-item"> <input id="s2" class="hide" type="checkbox" checked> <label for="s2" class="accordion-label">Second</label> <p class="accordion-child">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce quis ultrices nunc. Suspendisse a magna purus. In hac habitasse platea dictumst. Nullam sed nisl quis sem dignissim luctus. Etiam luctus mauris nulla, et efficitur massa efficitur ac.</p> </li> </ul> </body></html>

Questions / Comments: