"Untitled"
Bootstrap 4.1.1 Snippet by JMelody

<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ----------> <div class="container"> <div class="item border"> <div class="main"> <h1>This is your content</h1> </div> <ul class="nav nav-tabs" role="tablist"> <li class="nav-item"> <a class="nav-link flight" data-toggle="tab" href="#first-content">Home</a> </li> <li class="nav-item"> <a class="nav-link menu ticker" data-toggle="tab" href="#last-content">Menu</a> </li> </ul> <!-- Tab panes --> <div class="tab-content"> <div id="first-content" class="container tab-pane first-content"> <br> <h3>HOME</h3> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> </div> <div id="last-content" class="container tab-pane last-content"> <br> <h3>Menu 1</h3> <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> </div> </div> </div> </div>
.item{ border-radius:0.5rem; margin:30px auto; } .nav-active{ border-bottom:2px solid #0099cc ; } .item .tab-content{ display:none; border-bottom:none; } .main{ background:#0099cc; color:#ffffff; min-height:50px; align-items:center; } .main h1{ padding:15px; }
(function ($) { $(document).ready(function () { $(".main").click(function () { var nav = $(this).parent().find('.flight'); nav.click(); }); $('.flight').click(function () { var hidden = $(this).parents().eq(2).find('.tab-content'); var tab2 = $(this).parents().eq(2).find('.last-content'); if (hidden.is(':visible') && tab2.is(':hidden')) hidden.slideUp(); else { hidden.slideDown(); $(this).addClass('nav-active'); } }); $('.ticker').click(function () { var hidden = $(this).parents().eq(2).find('.tab-content'); var tab1 = $(this).parents().eq(2).find('.first-content'); if (hidden.is(':visible') && tab1.is(':hidden')) hidden.slideUp(); else hidden.slideDown(); }); }); }(jQuery));

Related: See More


Questions / Comments: