点击隐藏bootstrap Accordion标题

Question

我有两个带有手风琴的引导选项卡。

根据设计，当我点击手风琴标题时，面板应该像现在一样下降。但是，手风琴的标题需要隐藏。点击身体后，身体应该回滚，标题应该重新出现。

现在我已经建立它的方式，如果我点击标题，正文显示正确。但是，如果我点击身体，身体消失，标题不显示备份。我需要标题重新出现，并能够重新开始整个过程​​。

我已经包含了我的标记，jquery和两个截图。由于

<div class="panel-heading" role="tab" id="headingForensic"> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseForensic" aria-expanded="true" aria-controls="collapseOne"> 
     <h4 class="panel-title">       
      <img src="img/service_icons/forensic_icon.png"class="accordianImage"> FORENSIC COLLECTION  
     <img src="img/service_icons/arrow_left.png"class="accordianImage pull-right">  
     </h4> 
    </a> 
</div> 
<div id="collapseForensic" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo"> 
    <div class="panel-body"> 
    <div class="row"> 
     <div class="col-md-4"> 
      <img src="img/service_icons/security_icon_large.png"class="accordianImage"> 
     </div> 
     <div class="col-md-8"> 
      <a id="#openForensic" data-toggle="collapse" data-parent="#accordion" href="#collapseForensic" aria-expanded="true" aria-controls="collapseOne" ><h3>FORENSIC COLLECTION<img src="img/service_icons/arrow_down.png"class="accordianImage pull-right"> </h3></a> 
      <p>Security is as much about the small details as it is the big picture. An employee losing a flash drive with sensitive documents stored on it constitutes as much a breach of security as a theft. How do you best protect against these and other types of security breaches? We can show you. Whether you’re at the beginning of litigation or in the middle of an investigation, we can help you make sure that all your information stays safe. 
      </p> 
     </div> 
    </div> 
    </div> 
</div> 

$(document).ready(function() {    
    $("#headingForensic").click(function(){ 
     $("#headingForensic").hide(); 
    }); 
    $("#openForensic").click(function(){ 
     $("#headingForensic").show(); 
    }); 
}); 

Answer 1

这个怎么样？

$(document).ready(function() { 
    $("#headingForensic").click(function(){ 
     $('.panel-heading').hide(); 
    }); 
    $("#collapseForensic").click(function(){ 
     $('.panel-heading').show(); 
    }); 
}); 

你可以找到更多的细节关于这个位置：http://getbootstrap.com/javascript/#collapse

我希望这是有帮助的！

Answer 2

干草你检查了Bootstraps手风琴和标签的例子。我会在选项卡内嵌入手风琴。所有你需要做的是风格。这里有一个例子，点击home和profile标签查看2个变体。 http://getbootstrap.com/javascript/#tabs-exampleshttp://getbootstrap.com/javascript/#collapse-example-accordion