Hide bootstrap panels

Question

I have panel content (not an accordian) setup to be hidden on page load. When a user clicks on one of the tabs, a "hidden" class is removed thus showing the panel content. Then I want to hide the content if the user clicks the tab for the open panel:

$('#section-navigation a').click(function (e) {
  e.preventDefault()
  if ($(this).closest("li").hasClass("active")) {
    $('#section-navigation li.active').removeClass("active");
    $(".tab-content").addClass("tab-content-hidden");
  } else {
    $(".tab-content").removeClass("tab-content-hidden");
    $(this).tab('show');
  }
});

This does show the panel content on first click, hide the panel content on second click of the same tab but it does not remove the "active" class from the panel content "li", and a third click on the same tab does nothing. Example here (coloured panels): http://hawk.cloudlevel.me/

Fiddle: https://jsfiddle.net/uvvnpp0s/3/

How can I achieve my goal? I appreciate I might have gone about things in completely the wrong way, as I'm inexperienced with JS / jQuery.

Answer 1

Your custom tabs is conflicting with the bootstrap tabs implementation. Best would be have a custom tab implementation.

Here's a quick custom implementation - https://jsfiddle.net/nitincool4urchat/uvvnpp0s/9/

 $("a[role=tab]").click(function() { if ($(this).parent('li').hasClass('active')) { $(this).parent('li').removeClass('active'); $(".tab-content").addClass('tab-content-hidden'); } else { $("#section-navigation li").removeClass('active'); $(this).parent('li').addClass('active'); $(".tab-content").removeClass('tab-content-hidden'); $(".tab-content .tab-pane").hide(); //hide all $($(this).attr('href')).show(); //show the selected one; } }); 

 ul#section-navigation { list-style-type: none; padding: 0; } ul#section-navigation li { position: relative; float: left; width: 25%; padding-bottom: 15%; overflow: hidden; } ul#section-navigation li > a { position: absolute; top: 0; left: 0; bottom: 0; right: 0; text-align: center; border: 0; color: #0e034f; } ul#section-navigation li > a, ul#section-navigation li.active > a, ul#section-navigation li a:hover, ul#section-navigation li a:focus { background: 0; border: 0; margin: 0; outline: 0; } ul#section-navigation li > a h2 { font-size: 24px; margin-top: 1vw; } ul#section-navigation li > ap { display: none; } ul#section-navigation li a div div { position: absolute; bottom: 0; right: 0; width: 15%; } ul#section-navigation li a div div:after { content: ""; display: block; padding-top: 100%; } ul#section-navigation li a div div div { display: block; width: 100%; height: 100%; } ul#section-navigation li a div div div span { display: block; line-height: 100%; color: #fff; transition: 0.2s all; font-size: 12vw; } ul#section-navigation li.active a div div span { -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); transform-origin: 48% 48%; } .tab-content { overflow: hidden; max-height: 4000px; transition: max-height .5s cubic-bezier(1, 0, .7, 1); } .tab-content .panel-padding { padding-top: 2%; } .tab-content-close { float: right; font-size: 30px; width: 30px; text-align: center; margin-left: 100%; } .learn-more-1, .learn-more-2, .learn-more-3, .learn-more-4 { overflow: hidden; max-height: 4000px; padding-top: 60px; padding-bottom: 60px; } .tab-content-hidden, .learn-more-hidden, .bar-hidden { max-height: 0; padding-top: 0; padding-bottom: 0; } #link-learn-more-1, #link-learn-more-2, #link-learn-more-3, #link-learn-more-4 { position: relative; top: -50px; } .learn-more .tab-content img { width: 100%; } .panel-padding { padding: 5%; } 

 <script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.js"></script> <link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <div class="container-fluid"> <div class="row"> <div class="col-sm-12"> <ul class="nav nav-tabs" role="tablist" id="section-navigation"> <li role="presentation" class="gradient-white"> <a href="#panel-1" aria-controls="panel-1" role="tab"> <h2>Apprenticeships</h2> <p>Learn more about the great opportunities apprenticeships offer</p> <div> <div> <div class="bkg-blue"><span class="icon-plus"></span> </div> </div> </div> </a> </li> <li role="presentation" class="gradient-pink"> <a href="#panel-2" aria-controls="panel-2" role="tab"> <h2>Management</h2> <p>Developing the next generation of leaders and managers</p> <div> <div> <div class="bkg-pink"><span class="icon-plus"></span> </div> </div> </div> </a> </li> <li role="presentation" class="gradient-yellow"> <a href="#panel-3" aria-controls="panel-3" role="tab"> <h2>FE Teacher Training</h2> <p>Get qualified to train and teach in the FE sector</p> <div> <div> <div class="bkg-yellow"><span class="icon-plus"></span> </div> </div> </div> </a> </li> <li role="presentation" class="gradient-green"> <a href="#panel-4" aria-controls="panel-4" role="tab"> <h2>Learning Zone</h2> <p>e-Learning on demand 24/7</p> <div> <div> <div class="bkg-green"><span class="icon-plus"></span> </div> </div> </div> </a> </li> </ul> <div class="tab-content tab-content-hidden"> <div role="tabpanel" class="tab-pane fade in active" id="panel-1"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/apprenticeshipsbanner.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-blue"></a> <div class="stat color-blue"><span class="stat-number">95%</span><span class="stat-desc">of apprentices would recommend us</span> </div> <h2>Learn more about the great opportunities apprenticeships offer</h2> <p> <br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p> <a href="http://hawk.cloudlevel.me/apprenticeships" class="btn btn-blue" title="">Learn more</a> <a href="vacancies" class="btn btn-blue" title="">Current vacancies</a> </div> </div> <span class="bar bkg-blue"></span> </div> <div role="tabpanel" class="tab-pane fade in" id="panel-2"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/managementsmall.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-pink"></a> <div class="stat color-pink"><span class="stat-number">88%</span><span class="stat-desc">increased employee satisfaction</span> </div> <h2>Developing the next generation of leaders and managers</h2> <p> <br />Enjoy progressive, flexible learning that improves prospects, boosts careers and brings immediate value to your organisation.</p> <a href="http://hawk.cloudlevel.me/management" class="btn btn-pink" title="">Learn more</a> </div> </div> <span class="bar bkg-pink"></span> </div> <div role="tabpanel" class="tab-pane fade in" id="panel-3"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/tutortraining.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-yellow"></a> <div class="stat color-yellow"><span class="stat-number">95%</span><span class="stat-desc">had a positive impact on their career</span> </div> <h2>Inspiring training for aspiring teachers and assessors</h2> <p> <br />Take advantage of our accredited Level 3 and 4 qualifications for those who want to get into teaching, external assessing or internal quality control for assessments. Flexible, relevant and giving you the practical skills you need, our courses are designed to be easy to access, and help you take the next step in your career.</p> <a href="http://hawk.cloudlevel.me/fe-teacher-training" class="btn btn-yellow" title="">Learn more</a> </div> </div> <span class="bar bkg-yellow"></span> </div> <div role="tabpanel" class="tab-pane fade in" id="panel-4"> <div class="row"> <div class="col-sm-6"> <img src="http://hawk.cloudlevel.me/images/uploads/1.png" class="img-responsive" title="" alt="" /> </div> <div class="col-sm-6 panel-padding"> <a href="#" class="icon-remove tab-content-close color-green"></a> <div class="stat color-green"><span class="stat-number">93%</span><span class="stat-desc">would recommend to a friend</span> </div> <h2>Take the first steps towards being an outstanding apprentice</h2> <p> <br />Earn and learn across a variety of exciting sectors and jobs, improving your skills, gaining valuable experience and boosting your career from the very beginning.</p> <a href="http://hawk.cloudlevel.me/learning-zone" class="btn btn-green" title="">Learn more</a> </div> </div> </div> </div> </div> </div> </div>