<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/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 principal "> <div class="col-md-3 margin-frame"> <div class="frame-title" item-sel="1"> <h2>Titulo 1</h2> </div> <div class="frame-body cont1"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed semper nunc. Morbi iaculis auctor venenatis. Vivamus tempus mattis sollicitudin. Curabitur quis elementum diam. Sed ullamcorper tellus ut urna varius, fringilla facilisis magna fringilla. </p> </div> </div> <div class="col-md-3 margin-frame"> <div class="frame-title" item-sel="2"> <h2>Titulo 2</h2> </div> <div class="frame-body cont2"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed semper nunc. Morbi iaculis auctor venenatis. Vivamus tempus mattis sollicitudin. Curabitur quis elementum diam. Sed ullamcorper tellus ut urna varius, fringilla facilisis magna fringilla. </p> </div> </div> <div class="col-md-3 margin-frame"> <div class="frame-title" item-sel="3"> <h2>Titulo 3</h2> </div> <div class="frame-body cont3"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed semper nunc. Morbi iaculis auctor venenatis. Vivamus tempus mattis sollicitudin. Curabitur quis elementum diam. Sed ullamcorper tellus ut urna varius, fringilla facilisis magna fringilla. </p> </div> </div> <div class="col-md-3 margin-frame" > <div class="frame-title" item-sel="4"> <h2>Titulo 4</h2> </div> <div class="frame-body cont4"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed semper nunc. Morbi iaculis auctor venenatis. Vivamus tempus mattis sollicitudin. Curabitur quis elementum diam. Sed ullamcorper tellus ut urna varius, fringilla facilisis magna fringilla. </p> </div> </div> </div> </div>

.principal{ /*background-color: #ededed; */ background-image: url(https://image.freepik.com/free-psd/white-wood-texture-background-design_1022-75.jpg); } .frame-title{ width:100%; min-height: 70px; background-color: gray; padding: 5px; transition: background-color 1s; } .frame-title:hover{ background-color:#fcfcfc; } .frame-body{ width:100%; min-height: 70px; background-color: #e5e5e5; padding: 5px; display:none; opacity: 0.8; } .margin-frame{ padding-right: 0px !important; padding-left: 0px !important; }

$(function () { //$('.frame-body').hide(); $('.frame-title').click(function() { console.log('test'); //$('.frame-body').slideDown(); var itemsel = $(this).attr('item-sel'); for(var i = 1;i<5;i++){ if (i.toString() == itemsel) $('.cont' + i).fadeIn(); else $('.cont' + i).fadeOut(); } }); });