Bootstrap snippet: Select Content Type

designed to help people of all skill levels - designer or developer, huge nerd or early beginner.
copy and paste the code. Use it as a complete kit or use it to start something more complex.
tags: menu,content

<link href="" rel="stylesheet"> <div class="container bootstrap snippet"> <div class="row"> <div class="col-xs-12 col-sm-4 br-a br-light bg-light pv20 ph30"> <h4 class="micro-header">Select Content Type</h4> <div class="row text-center" id="content-type"> <div class="col-xs-4 col-sm-6"> <a class="holder-style p15 mb20 holder-active" href="#dock-image"> <span class="fa fa-picture-o holder-icon"></span> <br> Image </a> </div> <div class="col-xs-4 col-sm-6"> <a class="holder-style p15 mb20" href="#dock-panel"> <span class="fa fa-text-height holder-icon"></span> <br> Panel </a> </div> <div class="col-xs-4 col-sm-6"> <a class="holder-style p15 mb20" href="#dock-table"> <span class="fa fa-pencil-square-o holder-icon"></span> <br> Table </a> </div> <div class="col-xs-4 col-sm-6"> <a class="holder-style p15 mb20" href="#dock-form"> <span class="fa fa-map-marker holder-icon"></span> <br> Form </a> </div> <div class="col-xs-4 col-sm-6"> <a class="holder-style p15 mb20" href="#dock-text"> <span class="fa fa-film holder-icon"></span> <br> Text </a> </div> <div class="col-xs-4 col-sm-6"> <a class="holder-style p15 mb20" href="#dock-video"> <span class="fa fa-spinner holder-icon"></span> <br> Video </a> </div> </div> <button id="dock-push" type="button" class="btn btn-success fs14 fw600 pv15 btn-block">Send to Admin Dock</button> </div> <div class="col-xs-12 col-sm-8 br-a br-light bg-light dark"> <div id="dock-content" class="ph60"> <div id="dock-image" class="content active-content"> <div class="dock-item" data-title="Tiger Image"> <img class="img-responsive center-block" src=""> </div> </div> <div id="dock-panel" class="content"> PANEL </div> <div id="dock-table" class="content"> TABLE CONTENT </div> <div id="dock-form" class="content"> COOL FORM </div> <div id="dock-text" class="content"> AMAZING TEXT </div> <div id="dock-video" class="content"> AWESOME VIDEO </div> </div> </div> </div> </div>
body{ margin-top:20px; background:#e7e7e7; } .bg-light { background-color: #FAFAFA; color: #666; } .br-light { border-color: #e7e7e7 !important; } .br-a { border: 1px solid #eeeeee !important; } .ph30 { padding-left: 30px !important; padding-right: 30px !important; } .ph60 { padding: 60px !important; } .pv20 { padding-top: 20px !important; padding-bottom: 20px !important; } .bg-light.dark { background-color: #F2F2F2; } .micro-header { color: #999; text-align: center; font-weight: 400; margin-bottom: 20px; } h4, .h4 { font-size: 15px; } .holder-style.holder-active { background-color: #FFF; border:2px dashed #70ca63; } .mb20 { margin-bottom: 20px !important; } .p15 { padding: 15px !important; } .holder-style { display: block; padding: 9px 16px; color: #AAA; background-color: #f1f1f1; border: 2px dashed #d9d9d9; -webkit-transition: all 0.15s ease; -moz-transition: all 0.15s ease; transition: all 0.15s ease; } .holder-style.holder-active .holder-icon { color: #70ca63; } .holder-style .holder-icon { color: #AAA; font-size: 30px; padding-bottom: 10px; } a, a:hover, a:focus{ text-decoration:none !important; }
$(function(){ $('.content').hide(); $('.active-content').show(); $('.holder-style').click(function(e){ e.preventDefault(); $('.holder-style').removeClass('holder-active'); $('.content').hide(); $($(this).attr('href')).show(); $(this).addClass('holder-active'); }); });

Select Content Type

  Jan 3rd, 16:04