点击隐藏bootstrap手风琴标题

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

Hay你有没有检查过Bootstraps Accordion和Tab的例子。我会将手风琴嵌入标签内。你所要做的就是风格。这是一个示例，单击主页和配置文件选项卡以查看2个变体。 http://getbootstrap.com/javascript/#tabs-exampleshttp://getbootstrap.com/javascript/#collapse-example-accordion