Why isnt collapse from bootstrap working? - css

Question

I am not able to get the class collapse to work. I have done the following and followed the examples online. So when I click on the Search for example, it does not expand at all.
Any help would be appreciated and below is what I did.
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container override-visible-sm">
<div class="row">
<p aria-controls="footerLink-Search" aria-expanded="false" data-toggle="collapse" href='##footerLink-Search' role="button">
<strong><span class="text-primary">Search</span></strong>
</p>
<div class="collapse" id="footerLink-Search">
Doctor Finder<br />
Urgent Care Finder<br />
Affiliated Hospitals
<br />
<br />
</div>
<p aria-controls="footerLink-AboutUs" aria-expanded="false" data-toggle="collapse" href="##footerLink-AboutUs" role="button">
<strong><span class="text-primary">About Us</span></strong>
</p>
<div class="collapse" id="footerLink-AboutUs">
Our Code of Conduct<br />
Compliance & Resources<br />
Our Award<br />
Our Health Plans<br />
Our Mission & History<br />
Our Leaders<br />
Our Organization & History<br />
<a data-toggle="modal" href="##regalprivacy">Privacy Notice</a>
<br />
<br />
</div>
<p aria-controls="footerLink-PatientResources" aria-expanded="false" data-toggle="collapse" href="##footerLink-PatientResources" role="button">
<strong><span class="text-primary">Patients Resources</span></strong>
</p>
<div class="collapse" id="footerLink-PatientResources">
Community Events<br />
Programs & Resources<br />
Patient Portal<br />
Patient Rights <br />
Vital Care<br />
Frequently asked Questions<br />
Appointment Preparation
<br />
<br />
</div>
<p aria-controls="footerLink-ProviderResources" aria-expanded="false" data-toggle="collapse" href="##footerLink-ProviderResources" role="button">
<strong><span class="text-primary">Provider Resources</span></strong>
</p>
<div class="collapse" id="footerLink-ProviderResources">
Vital Care Service<br />
Regal Access Express<br />
Claims Information<br />
National Provider Information<br />
California Immunization Registry <br />
Electronic Claims<br />
Compliance News Letter
<br />
<br />
</div>
<p aria-controls="footerLink-NewsAndEvents" aria-expanded="false" data-toggle="collapse" href="##footerLink-NewsAndEvents" role="button">
<strong><span class="text-primary">News and Events</span></strong>
</p>
<div class="collapse" id="footerLink-NewsAndEvents">
We Speak your Language<br />
Heritage Newsletter
<br />
<br />
</div>
<p aria-controls="footerLink-Careers" aria-expanded="false" data-toggle="collapse" href="##footerLink-Careers" role="button">
<strong><span class="text-primary">Careers</span></strong>
</p>
<div class="collapse" id="footerLink-Careers">
Why Join Us<br />
Administrative Careers<br />
Provider Careers
<br />
<br />
</div>
<p aria-controls="footerLink-Connect" aria-expanded="false" data-toggle="collapse" href="##footerLink-Connect" role="button">
<strong><span class="text-primary">Connect</span></strong>
</p>
<div class="collapse" id="footerLink-Connect">
Contact<br />
Brokers<br />
<img alt="Facebook" height="25" src="/regal_prod/Regal-en-us/assets/Image/social-facebook.gif" style="padding-bottom: 5px;" width="25" /><br />
<img alt="YouTube" height="25" src="/regal_prod/Regal-en-us/assets/Image/social-youtube.gif" style="padding-bottom: 5px;" width="25" /><br />
<img alt="LinkedIn" height="25" src="/regal_prod/Regal-en-us/assets/Image/social-linkedin.gif" width="25" />
<br />
<br />
</div>
</div>
</div>
</div>

Answer 1

Here is the same code with bootstrap (css and js) and jquery and it seems to work:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container override-visible-sm">
<div class="row">
<p aria-controls="footerLink-Search" aria-expanded="false" data-toggle="collapse" href='##footerLink-Search' role="button">
<strong><span class="text-primary">Search</span></strong>
</p>
<div class="collapse" id="footerLink-Search">
Doctor Finder
<br />
Urgent Care Finder
<br />
Affiliated Hospitals
<br />
<br />
</div>
<p aria-controls="footerLink-AboutUs" aria-expanded="false" data-toggle="collapse" href="##footerLink-AboutUs" role="button">
<strong><span class="text-primary">About Us</span></strong>
</p>
<div class="collapse" id="footerLink-AboutUs">
Our Code of Conduct
<br />
Compliance & Resources
<br />
Our Award
<br />
Our Health Plans
<br />
Our Mission & History
<br />
Our Leaders
<br />
Our Organization & History
<br />
<a data-toggle="modal" href="##regalprivacy">Privacy Notice</a>
<br />
<br />
</div>
<p aria-controls="footerLink-PatientResources" aria-expanded="false" data-toggle="collapse" href="##footerLink-PatientResources" role="button">
<strong><span class="text-primary">Patients Resources</span></strong>
</p>
<div class="collapse" id="footerLink-PatientResources">
Community Events
<br />
Programs & Resources
<br />
Patient Portal
<br />
Patient Rights
<br />
Vital Care
<br />
Frequently asked Questions
<br />
Appointment Preparation
<br />
<br />
</div>
<p aria-controls="footerLink-ProviderResources" aria-expanded="false" data-toggle="collapse" href="##footerLink-ProviderResources" role="button">
<strong><span class="text-primary">Provider Resources</span></strong>
</p>
<div class="collapse" id="footerLink-ProviderResources">
Vital Care Service
<br />
Regal Access Express
<br />
Claims Information
<br />
National Provider Information
<br />
California Immunization Registry
<br />
Electronic Claims
<br />
Compliance News Letter
<br />
<br />
</div>
<p aria-controls="footerLink-NewsAndEvents" aria-expanded="false" data-toggle="collapse" href="##footerLink-NewsAndEvents" role="button">
<strong><span class="text-primary">News and Events</span></strong>
</p>
<div class="collapse" id="footerLink-NewsAndEvents">
We Speak your Language
<br />
Heritage Newsletter
<br />
<br />
</div>
<p aria-controls="footerLink-Careers" aria-expanded="false" data-toggle="collapse" href="##footerLink-Careers" role="button">
<strong><span class="text-primary">Careers</span></strong>
</p>
<div class="collapse" id="footerLink-Careers">
Why Join Us
<br />
Administrative Careers
<br />
Provider Careers
<br />
<br />
</div>
<p aria-controls="footerLink-Connect" aria-expanded="false" data-toggle="collapse" href="##footerLink-Connect" role="button">
<strong><span class="text-primary">Connect</span></strong>
</p>
<div class="collapse" id="footerLink-Connect">
Contact
<br />
Brokers
<br />
<a href="http://www.facebook.com/RegalMed/?fref=nf" target="_blank">
<img alt="Facebook" height="25" src="/regal_prod/Regal-en-us/assets/Image/social-facebook.gif" style="padding-bottom: 5px;" width="25" />
</a>
<br />
<a href="http://www.youtube.com/watch?v=JJGHPbmiCPQ" target="_blank">
<img alt="YouTube" height="25" src="/regal_prod/Regal-en-us/assets/Image/social-youtube.gif" style="padding-bottom: 5px;" width="25" />
</a>
<br />
<a href="http://www.linkedin.com/company/4167163?" target="_blank">
<img alt="LinkedIn" height="25" src="/regal_prod/Regal-en-us/assets/Image/social-linkedin.gif" width="25" />
</a>
<br />
<br />
</div>
</div>
</div>
</div>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>