"CSS Tabs"
Bootstrap 3.3.0 Snippet by juliefab

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ----------> <div class="container"> <div class="row"> <h1>CSS TABS</h1> <ul class=tabs> <li> <input type=radio name=tabs id=tab1 checked> <label for=tab1>Tab1</label> <div id=tab-content1 class=tab-content> <p> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </p> </div> </li> <li> <input type=radio name=tabs id=tab2 checked> <label for=tab2>Tab2</label> <div id=tab-content2 class=tab-content> <p> In faucibus ullamcorper vulputate. Fusce massa ex, posuere sit amet felis eu, ullamcorper pharetra nulla. Morbi fringilla arcu accumsan, consequat sem vitae, congue risus. Ut sit amet lobortis leo. Aenean erat lectus, egestas vel rutrum eu, mattis vel est. In nec nulla non turpis ornare mollis eu sit amet nulla. Aliquam leo tortor, dictum in facilisis eu, viverra a magna. Sed viverra euismod diam sed luctus. </p> </div> </li> </ul> <br style=clear:both;> </div> </div>
* { margin: 0; padding: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } body { padding: 20px; color: #333; background: #eee; } h1 { font-weight: normal; font-size: 40px; margin: 20px 0 100px 10px; } .tabs { width: 650px; float: none; list-style: none; position: relative; margin: 80px 0 0 10px; } .tabs li { float: left; display: block; border:solid 1px; } .tabs input[type="radio"] { position: absolute; top: -9999px; left: -9999px; } .tabs label { display: block; padding: 14px 21px; border-radius: 2px 2px 0 0; font-size: 20px; background: #ccc; cursor: pointer; position: relative; top: 4px; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out; } .tabs [id^="tab"]:checked + p { color:black; -moz-transition: all 2.2s ease-in-out; -o-transition: all 2.2s ease-in-out; -webkit-transition: all 2.2s ease-in-out; transition: all 2.2s ease-in-out; } .tabs label:hover { background: #fff; } .tabs .tab-content { z-index: 2; display: none; overflow: hidden; width: 100%; font-size: 17px; line-height: 25px; padding: 25px; position: absolute; top: 53px; left: 0; background: #fff; } .tabs [id^="tab"]:checked + label { background: #fff; } .tabs [id^="tab"]:checked ~ [id^="tab-content"] { display: block; }

Related: See More


Questions / Comments: