"Jquery Tab sub tab "
Bootstrap 4.1.1 Snippet by ravic9089

<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/2.2.4/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="my-margin-top"> <div class="container"> <div class="row"> <!-- /.col-md-4 --> <div class="col-md-12"> <div class="tab-pane fade help active show" id="help" role="tabpanel" aria-labelledby="contact-tab4"> <div class="profile-tab-col"> <h6 class="text-white">HELP</h6> </div> <br> <div class="clearfix"></div> <section id="faq"> <!-- General--> <div class="tabs"> <div class="tab"> <input type="radio" id="rd1" name="rd"> <label class="tab-label" for="rd1">General</label> <div class="tab-content help22"> <button class="accordion">What is Jaayu Super Cash?</button> <div class="panel"> <p> Jaayu Super Cash is a virtual cash which is given for promotional purposes. It can be redeemed against medicines purchased on Jaayu platform and its not transferable. You will be able to use your Jaayu Super Cash to pay upto 20% of your total bill amount. </p> </div> <button class="accordion">What is Jaayu Cash ?</button> <div class="panel"> <p> Jaayu cash is a virtual cash. One Jaayu cash is equivalent to Rs 1. It is the amount earned via refunds. It can be redeemed against any products or services purchased on Jaayu platform and is not transferable. </p> </div> <!-- <button class="accordion">Section 1</button> <div class="panel"> <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.</p> </div> --> </div> </div> </div> <!-- Medicine--> <div class="tabs"> <div class="tab"> <input type="radio" id="rd2" name="rd"> <label class="tab-label" for="rd2">Medicine</label> <div class="tab-content help22"> <button class="accordion">What is Jaayu Super Cash?</button> <div class="panel"> <p> Jaayu Super Cash is a virtual cash which is given for promotional purposes. It can be redeemed against medicines purchased on Jaayu platform and its not transferable. You will be able to use your Jaayu Super Cash to pay upto 20% of your total bill amount. </p> </div> <button class="accordion">What is Jaayu Cash ?</button> <div class="panel"> <p> Jaayu cash is a virtual cash. One Jaayu cash is equivalent to Rs 1. It is the amount earned via refunds. It can be redeemed against any products or services purchased on Jaayu platform and is not transferable. </p> </div> <!-- <button class="accordion">Section 1</button> <div class="panel"> <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.</p> </div> --> </div> </div> </div> </section> </div> </div> </div> <!-- /.col-md-8 --> </div> </div> <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> </script> </div>
.card.my-card-p { padding: 4px 10px 0px 10px; /* box-shadow: 2px 2px #f8f8f8; */ margin-bottom: 10px; } .card-link p { margin-bottom: 0rem !important; } .nav-pills .nav-link { border-radius: .25rem; border: 1px solid #d5d5d5; color: #333; } .example-image2 { width: 100%; height: 80px; margin: 5px 0px; } .input-my input, .input-my select { border: none; outline: none; border-bottom: 1px solid #aca8a8; border-radius: 0; padding: 0rem 0rem !important; background: none; } h5.card-title.text-left { padding-bottom: 6px; border-bottom: 1px solid #ccc; } .my-card { padding: 8px; margin: 2px 2px; } input.form-control { padding: 0rem 0rem !important; } .del { float: right; } .alin { float: left; } .card-body { padding: 6px; } .mi1 { position: absolute; } .mi2 { position: absolute; width: 80%; left: 17%; } @media only screen and (max-width:767px) { .mi1 { position: relative; } .mi2 { width: 74%; left: 20%; top: 35%; } } /* Accordion styles */ .help .tabs { border-radius: 4px; overflow: hidden; /* box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);*/ } .help .tab { width: 100%; color: white; overflow: hidden; } .help .tab-label { display: -webkit-box; display: flex; -webkit-box-pack: justify; justify-content: space-between; padding: .5em .5em; background: blue; font-weight: bold; cursor: pointer; /* Icon */ } .help .tab-label:hover { background: blue; } .help .tab-label::after { content: "\276F"; width: 1em; height: 1em; text-align: center; -webkit-transition: all .35s; transition: all .35s; } .help .tab-content { max-height: 0; padding: 0 1em; color: #666; background: white; -webkit-transition: all .35s; transition: all .35s; } .help .tab-close { display: -webkit-box; display: flex; -webkit-box-pack: end; justify-content: flex-end; padding: 1em; font-size: 0.75em; background: #2c3e50; cursor: pointer; } .help .tab-close:hover { background: #1a252f; } .help input:checked+.tab-label { background: #007bff; } .help input { position: absolute; opacity: 0; z-index: -1; } input:checked+.tab-label::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } input:checked~.tab-content { max-height: 100vh; padding: 1em; } .help22>.accordion { background-color: #184677; color: #f6f6f6; cursor: pointer; padding: 10px 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 13px; transition: 0.4s; } /* .help22.active, .help22.accordion:hover { background-color: #ccc; } */ .help22.panel { padding: 0 12px; display: none; background-color: white; overflow: hidden; transition: max-height 0.2s ease-out; }
var acc = document.getElementsByClassName("accordion"); var i; for (i = 0; i < acc.length; i++) { acc[i].addEventListener("click", function() { this.classList.toggle("active"); var panel = this.nextElementSibling; if (panel.style.display === "block") { panel.style.display = "none"; } else { panel.style.display = "block"; } }); }

Related: See More


Questions / Comments: