CODEWITHSUNDEEP
jquerytwitter-bootstrap-3
C.Coggins
C.Coggins

Reputation: 215

Hide bootstrap Accordion Title on click

I have two bootstrap tabs with an accordion on each.

Per the design, when I click on the accordion heading, the panel should drop down, as it currently does. However, the accordion heading needs to be hidden. Upon clicking the body, the body should roll back up and the title should reappear.

The way I have it built now, If I click the title, the body appears correctly. However, if i click the body, the body disappears and the title does not show back up. I need the title to reappear and be able to start the whole process over again.

I've included my markup, jquery, and two screenshots. Thanks

<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();
    });
});

Accordion Closed Accordion Open

Upvotes: 0

Views: 2669

Answers (2)

Dee
Dee

Reputation: 714

Hay have you checked out Bootstraps Accordion and Tab examples. I would embed the accordion inside of the tabs. All you have to do is style. Here's an example click on the home and profile tab to see the 2 variations. http://getbootstrap.com/javascript/#tabs-exampleshttp://getbootstrap.com/javascript/#collapse-example-accordion

Upvotes: 0

brennan
brennan

Reputation: 131

How about this?

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

You can find more details about this here: http://getbootstrap.com/javascript/#collapse

I hope this is helpful!

Upvotes: 1

Related Questions