"Jeff Edits"
Bootstrap 3.3.0 Snippet by jlocklin

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <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"> <div class="col-sm-12 bhoechie-tab-container"> <div class="col-md-1 col-sm-2 col-xs-3 bhoechie-tab-menu"> <div class="list-group"> <a href="#" class="list-group-item active text-center"> <img src="https://www.fmsc.org/-/media/images/batey106/ismaeledited.jpg" width="100%" height="100%"><span class="cover">Ismael</span> </a> <a href="#" class="list-group-item text-center"> <img src="https://www.fmsc.org/-/media/images/batey106/rosaedited2.jpg" width="100%" height="100%"><span class="cover">Rosa</span> </a> <a href="#" class="list-group-item text-center"> <img src="https://www.fmsc.org/-/media/images/batey106/chefcanditoedited.jpg" width="100%" height="100%"><span class="cover">Chef Candito </span></a> <a href="#" class="list-group-item text-center"> <img src="https://www.fmsc.org/-/media/images/batey106/pastormedeedited.jpg" width="100%" height="100%"><span class="cover">Pastor Mede </span></a> <a href="#" class="list-group-item text-center"> <img src="https://www.fmsc.org/-/media/images/batey106/rosaedited2.jpg" width="100%" height="100%"><span class="cover">Five </span></a> <a href="#" class="list-group-item text-center"> <img src="https://www.fmsc.org/-/media/images/batey106/ismaeledited.jpg" width="100%" height="100%"><span class="cover">Six </span></a> </div> </div> <div class="col-lg-11 col-md-11 col-sm-10 col-xs-9 bhoechie-tab"> <!-- flight section --> <div class="bhoechie-tab-content active"> <div class="image third-round leader1 leaderimg" style=""> <img class="img-responsive" src="https://www.fmsc.org/-/media/images/batey106/ismaeledited.jpg" alt="leaders"> </div> <div class="leaderdescription" style=""> <div id="leader1-content" class="anchortarget" style="display: block;"> <h2>Ismael</h2> <p>If you ask 21-year-old Ismael what he wants to be when he grows up, first he will you that he’s already grown up. Then he’ll rattle off a list of a dozen career possibilities and ideas for his future. But more than anything, Ismael wants to be a leader in Batey 106 and in the Dominican Republic – an identity he doesn’t realize he has already begun to achieve.</p> <p>“When people ask what you want to do with your future, it means they can see you have a future,” he said. </p> <p>Before the cooking and English classes were available in Batey 106, young people would leave, Ismael said. But now, he said, they have a future. </p></div> </div> </div> <!-- train section --> <div class="bhoechie-tab-content"> <div class="image third-round leader1 leaderimg" style=""> <img class="img-responsive" src="https://www.fmsc.org/-/media/images/batey106/rosaedited.jpg" alt="leaders"> </div> <div class="leaderdescription" style=""> <div id="leader2-content" class="anchortarget" style="display: block;"> <h2>Rosa</h2> <p>Rosa remembers watching her older sister get married at 13 years old. And it wasn’t just her, she said. </p> <p>Roas has lived in Batey 106 her whole life and seen girls as young as 12 get married and have babies. </p> <p>“You would see children carrying children, and this caused a lot of problems,” the 29-year-old committee member said. “They knew that that was the only way they could find what they were looking for and be taken care of.”</p> <p>But it’s different now.</p> <p>“This project has done a big thing for the females of this community,” she said about the PBFA. “Now there’s a mentality with the young girls that there is more.”</p> <p>And it’s personal for Rosa as a mom of three girls ranging in age from 10 months to 9 years. </p> <p>She dreams that her daughters can achieve what she wasn’t able to, and now she knows they have that opportunity. </p> <p>But the project has also revitalized her dreams. She is currently finishing secondary school and has plans to study psychology. </p></div> </div> </div> <!-- hotel search --> <div class="bhoechie-tab-content"> <div class="image third-round leader1 leaderimg" style=""> <img class="img-responsive" src="https://www.fmsc.org/-/media/images/batey106/chefcanditoedited.jpg" alt="leaders"> </div> <div class="leaderdescription" style=""> <div id="leader2-content" class="anchortarget" style="display: block;"> <h2>Chef Candito</h2> <p>“You would see children carrying children, and this caused a lot of problems,” the 29-year-old committee member said. “They knew that that was the only way they could find what they were looking for and be taken care of.”</p> <p>But it’s different now.</p> <p>“This project has done a big thing for the females of this community,” she said about the PBFA. “Now there’s a mentality with the young girls that there is more.”</p> <p>And it’s personal for Rosa as a mom of three girls ranging in age from 10 months to 9 years. </p> <p>She dreams that her daughters can achieve what she wasn’t able to, and now she knows they have that opportunity. </p> <p>But the project has also revitalized her dreams. She is currently finishing secondary school and has plans to study psychology. </p></div> </div> </div> <div class="bhoechie-tab-content"> <div class="image third-round leader1 leaderimg" style=""> <img class="img-responsive" src="https://www.fmsc.org/-/media/images/batey106/pastormedeedited.jpg" alt="leaders"> </div> <div class="leaderdescription" style=""> <div id="leader2-content" class="anchortarget" style="display: block;"> <h2>Pastor Mede</h2> <p>Roas has lived in Batey 106 her whole life and seen girls as young as 12 get married and have babies. </p> <p>“You would see children carrying children, and this caused a lot of problems,” the 29-year-old committee member said. “They knew that that was the only way they could find what they were looking for and be taken care of.”</p> <p>But it’s different now.</p> <p>“This project has done a big thing for the females of this community,” she said about the PBFA. “Now there’s a mentality with the young girls that there is more.”</p> <p>And it’s personal for Rosa as a mom of three girls ranging in age from 10 months to 9 years. </p> <p>She dreams that her daughters can achieve what she wasn’t able to, and now she knows they have that opportunity. </p> <p>But the project has also revitalized her dreams. She is currently finishing secondary school and has plans to study psychology. </p></div> </div> </div> <div class="bhoechie-tab-content"> <div class="image third-round leader1 leaderimg" style=""> <img class="img-responsive" src="https://www.fmsc.org/-/media/images/batey106/chefcanditoedited.jpg" alt="leaders"> </div> <div class="leaderdescription" style=""> <div id="leader2-content" class="anchortarget" style="display: block;"> <h2>Five</h2> <p>But it’s different now.</p> <p>“This project has done a big thing for the females of this community,” she said about the PBFA. “Now there’s a mentality with the young girls that there is more.”</p> <p>And it’s personal for Rosa as a mom of three girls ranging in age from 10 months to 9 years. </p> <p>She dreams that her daughters can achieve what she wasn’t able to, and now she knows they have that opportunity. </p> <p>But the project has also revitalized her dreams. She is currently finishing secondary school and has plans to study psychology. </p></div> </div> </div> <div class="bhoechie-tab-content"> <div class="image third-round leader1 leaderimg" style=""> <img class="img-responsive" src="https://www.fmsc.org/-/media/images/batey106/ismaeledited.jpg" alt="leaders"> </div> <div class="leaderdescription" style=""> <div id="leader2-content" class="anchortarget" style="display: block;"> <h2>Six</h2> <p>“This project has done a big thing for the females of this community,” she said about the PBFA. “Now there’s a mentality with the young girls that there is more.”</p> <p>And it’s personal for Rosa as a mom of three girls ranging in age from 10 months to 9 years. </p> <p>She dreams that her daughters can achieve what she wasn’t able to, and now she knows they have that opportunity. </p> <p>But the project has also revitalized her dreams. She is currently finishing secondary school and has plans to study psychology. </p></div> </div> </div> </div> </div> </div> </div>
/* bhoechie tab */ div.bhoechie-tab-container{ z-index: 10; background-color: #ffffff; padding: 0 !important; border-radius: 4px; -moz-border-radius: 4px; margin-top: 20px; margin-left: 50px; background-clip: padding-box; opacity: 0.97; filter: alpha(opacity=97); } .list-group-item { max-height: 100px; overflow: hidden; padding: 0 !important; border: 0 !important; margin: 10px 0px; } .list-group-item img { opacity: 0.2; border-radius: 50%; } .active img { opacity: 0.8; } div.bhoechie-tab-menu{ padding-right: 0; padding-left: 0; padding-bottom: 0; } div.bhoechie-tab-menu div.list-group{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a{ margin-bottom: 0; } div.bhoechie-tab-menu div.list-group>a .glyphicon, div.bhoechie-tab-menu div.list-group>a .fa { color: rgba(35, 97, 146, 0.85);; } div.bhoechie-tab-menu div.list-group>a:first-child{ border-top-right-radius: 0; -moz-border-top-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a:last-child{ border-bottom-right-radius: 0; -moz-border-bottom-right-radius: 0; } div.bhoechie-tab-menu div.list-group>a.active, div.bhoechie-tab-menu div.list-group>a.active .glyphicon, div.bhoechie-tab-menu div.list-group>a.active .fa{ background-color: white; text-shadow: 1px 1px 3px rgba(0,0,0,0.7); } div.bhoechie-tab-menu div.list-group>a.active:after{ content: ''; position: absolute; left: 100%; top: 50%; margin-top: -13px; border: 0;} .cover { position: absolute; top: 30px; left: 10px; font-weight: bold; } div.bhoechie-tab-content{ background-color: #ffffff; border: 0px; padding: 0px; } div.bhoechie-tab div.bhoechie-tab-content:not(.active){ display: none; } .list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus { border: 0px; } .third-round img { max-width: 200px; border-radius: 100px; float: right; margin-left: 50px; }
$(document).ready(function() { $("div.bhoechie-tab-menu>div.list-group>a").click(function(e) { e.preventDefault(); $(this).siblings('a.active').removeClass("active"); $(this).addClass("active"); var index = $(this).index(); $("div.bhoechie-tab>div.bhoechie-tab-content").removeClass("active"); $("div.bhoechie-tab>div.bhoechie-tab-content").eq(index).addClass("active"); }); });

Related: See More


Questions / Comments: