"tab"
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/andylorimer/pen/meXadK?limit=all&page=18&q=Accordion" /> <style class="cp-pen-styles">@import url('https://fonts.googleapis.com/css?family=Open Sans:400,700|Montserrat'); body { margin: 0; padding: 0; font-family: 'Montserrat'; font-size: 13px; letter-spacing: 1px; } #tabs { width: 700px; display: flex; position: relative; margin: 0 auto; margin-top: 50px; height: auto; min-height: 200px; max-height: 600px; overflow: hidden; } ul { position: relative; display: inline-block; margin: 0; padding: 0; list-style-type: none; vertical-align: top; width: 50%; } ul li a { position: relative; display: block; width: 100%; text-decoration: none; color: #3b3b3b; border-top: solid 2px #e9e9e9; padding: 20px 5px; z-index: 1; opacity: .5; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; -o-transition: 0.3s ease; transition: 0.3s ease; } ul li:focus, a:focus { outline: none; } ul li:nth-child(1) a { border-top: none; } ul li a.active { opacity: 1; } .para-a { font-weight: bold; margin-top: 10px; padding: 0; text-transform: uppercase; font-size: 11px; letter-spacing: 1px; border: none; font-family: 'Montserrat'; color: #2b2b2b; } .tag { position: relative; width: 100%; } .icon { position: relative; display: inline-block; width: 50px; height: 50px; background: #c7c7c7; border-radius: 100%; vertical-align: middle; } .block { position: absolute; width: 18px; height: 18px; vertical-align: middle; border: solid 2px #7b7b7b; border-radius: 5px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .circle { position: absolute; padding: 2px; border: solid 2px #7b7b7b; border-radius: 100%; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .title { display: inline-block; text-transform: uppercase; font-weight: bold; padding: 0 10px; vertical-align: middle; color: #7b7b7b; } .addon { position: relative; width: 80%; top: -25px; margin-left: 70px; letter-spacing: 0; font-size: 13px; color: #9b9b9b; opacity: 0; font-family: 'Open Sans'; } .addon.fadein { opacity: 1; } .browser { width: 45%; height: 95%; position: absolute; border-style: solid; border-width: 2px 0 2px 2px; border-color: #7b7b7b transparent #7b7b7b #7b7b7b; right: 0; border-radius: 10px 0 0 10px; overflow: hidden; } .top-bar { position: absolute; top: 0; left: 0; width: 100%; height: 20px; line-height: 20px; background: #fff; border-bottom: solid 2px #7b7b7b; z-index: 2; } .dot { position: relative; display: inline-block; padding: 4px; background: #c7c7c7; border-radius: 100%; } .dot:nth-child(1) { margin-left: 7px; } #tabs-1, #tabs-2, #tabs-3 { position: absolute; top: 0; right: 0; width: 100%; height: 100%; } #tabs-1 { background: #9b9b9b; } #tabs-2 { background: #c9c9c9; } #tabs-3 { background: #1b1b1b; }</style></head><body> <div id="tabs"> <ul id="accordion"> <li> <a class="active" href="#tabs-1"> <div class="tag"> <div class="icon"> <div class="block"> <div class="circle"></div> </div> </div> <span class="title">Feature One</span> </div> </a> <div class="addon fadein"> <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </span> <a class="para-a" href="#">Learn More</a> </div> </li> <li> <a href="#tabs-2"> <div class="tag"> <div class="icon"> <div class="block"> <div class="circle"></div> </div> </div> <span class="title">Feature Two</span> </div> </a> <div class="addon"> <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </span> <a class="para-a" href="#">Learn More</a> </div> </li> <li> <a href="#tabs-3"> <div class="tag"> <div class="icon"> <div class="block"> <div class="circle"></div> </div> </div> <span class="title">Feature Three</span> </div> </a> <div class="addon"> <span> Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s. </span> <a class="para-a" href="#">Learn More</a> </div> </li> </ul> <div class="browser"> <div class="top-bar"> <div class="dot"></div> <div class="dot"></div> <div class="dot"></div> </div> <div id="tabs-1"></div> <div id="tabs-2"></div> <div id="tabs-3"></div> </div> </div> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script >$(function() { $("#tabs").tabs({ show: { effect: "blind", direction: "right", duration: 300 } }); $( "#accordion" ).accordion(); var btn = $('#accordion li a'); var wrapper = $('#accordion li'); $(btn).on('click', function() { $(btn).removeClass('active'); $(btn).parent().find('.addon').removeClass('fadein'); $(this).addClass('active'); $(this).parent().find('.addon').addClass('fadein'); }); }); //# sourceURL=pen.js </script> </body></html>

Related: See More

Light Bootstrap Dashboard PRO React

Questions / Comments: