Roberto Flores Roberto Flores - 4 months ago 6
CSS Question

Why isnt collapse from bootstrap working?

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">
<a href="index.cfm/doctor-finder/">Doctor Finder</a><br />
<a href="index.cfm/urgent-care-finder/">Urgent Care Finder</a><br />
<a href="index.cfm/about-us/our-contracted-hospitals/">Affiliated Hospitals</a>
<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">
<a href="index.cfm/about-us/our-code-of-conduct/">Our Code of Conduct</a><br />
<a href="index.cfm/about-us/compliance-and-resources/">Compliance &amp; Resources</a><br />
<a href="index.cfm/about-us/our-awards/">Our Award</a><br />
<a href="index.cfm/about-us/our-health-plans/">Our Health Plans</a><br />
<a href="index.cfm/about-us/our-mission-and-history/">Our Mission &amp; History</a><br />
<a href="index.cfm/about-us/our-leaders/">Our Leaders</a><br />
<a href="index.cfm/about-us/our-organization-and-offices/">Our Organization &amp; History</a><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">
<a href="index.cfm/patient-resources/community-events/">Community Events</a><br />
<a href="index.cfm/patient-resources/programs-and-resources/">Programs &amp; Resources</a><br />
<a href="index.cfm/patient-resources/patient-portal/">Patient Portal</a><br />
<a href="index.cfm/patient-resources/patient-rights/">Patient Rights </a><br />
<a href="index.cfm/patient-resources/vital-care/">Vital Care</a><br />
<a href="index.cfm/patient-resources/frequently-asked-questions/">Frequently asked Questions</a><br />
<a href="index.cfm/patient-resources/appointment-preparation/">Appointment Preparation</a>
<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">
<a href="l_prod/index.cfm/provider-resources/vital-care-services/">Vital Care Service</a><br />
<a href="/regal_prod/index.cfm/provider-resources/regal-express-access-rea/">Regal Access Express</a><br />
<a href="/regal_prod/index.cfm/provider-resources/claims-information/">Claims Information</a><br />
<a href="/regal_prod/index.cfm/provider-resources/national-provider-identifier/">National Provider Information</a><br />
<a href="/regal_prod/index.cfm/provider-resources/california-immunization-registry/">California Immunization Registry </a><br />
<a href="/regal_prod/index.cfm/provider-resources/electronic-claims/">Electronic Claims</a><br />
<a href="/regal_prod/index.cfm/provider-resources/compliance-newsletter/">Compliance News Letter</a>
<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">
<a href="/regal_prod/index.cfm/news-events/we-speak-your-language/">We Speak your Language</a><br />
<a href="/regal_prod/index.cfm/news-events/heritage-touchpoints-newsletter/">Heritage Newsletter</a>
<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">
<a href="/regal_prod/index.cfm/careers/why-join-us/">Why Join Us</a><br />
<a href="/regal_prod/index.cfm/careers/administrative-careers/">Administrative Careers</a><br />
<a href="/regal_prod/index.cfm/careers/provider-careers/">Provider Careers</a>
<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">
<a href="http://oc2-web03/regal_prod/index.cfm/contact/">Contact</a><br />
<a href="http://oc2-web03/regal_prod/index.cfm/brokers/">Brokers</a><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>




Answer

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">
      <a href="index.cfm/doctor-finder/">Doctor Finder</a>
      <br />
      <a href="index.cfm/urgent-care-finder/">Urgent Care Finder</a>
      <br />
      <a href="index.cfm/about-us/our-contracted-hospitals/">Affiliated Hospitals</a>
      <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">
      <a href="index.cfm/about-us/our-code-of-conduct/">Our Code of Conduct</a>
      <br />
      <a href="index.cfm/about-us/compliance-and-resources/">Compliance &amp; Resources</a>
      <br />
      <a href="index.cfm/about-us/our-awards/">Our Award</a>
      <br />
      <a href="index.cfm/about-us/our-health-plans/">Our Health Plans</a>
      <br />
      <a href="index.cfm/about-us/our-mission-and-history/">Our Mission &amp; History</a>
      <br />
      <a href="index.cfm/about-us/our-leaders/">Our Leaders</a>
      <br />
      <a href="index.cfm/about-us/our-organization-and-offices/">Our Organization &amp; History</a>
      <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">
      <a href="index.cfm/patient-resources/community-events/">Community Events</a>
      <br />
      <a href="index.cfm/patient-resources/programs-and-resources/">Programs &amp; Resources</a>
      <br />
      <a href="index.cfm/patient-resources/patient-portal/">Patient Portal</a>
      <br />
      <a href="index.cfm/patient-resources/patient-rights/">Patient Rights </a>
      <br />
      <a href="index.cfm/patient-resources/vital-care/">Vital Care</a>
      <br />
      <a href="index.cfm/patient-resources/frequently-asked-questions/">Frequently asked Questions</a>
      <br />
      <a href="index.cfm/patient-resources/appointment-preparation/">Appointment Preparation</a>
      <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">
      <a href="l_prod/index.cfm/provider-resources/vital-care-services/">Vital Care Service</a>
      <br />
      <a href="/regal_prod/index.cfm/provider-resources/regal-express-access-rea/">Regal Access Express</a>
      <br />
      <a href="/regal_prod/index.cfm/provider-resources/claims-information/">Claims Information</a>
      <br />
      <a href="/regal_prod/index.cfm/provider-resources/national-provider-identifier/">National Provider Information</a>
      <br />
      <a href="/regal_prod/index.cfm/provider-resources/california-immunization-registry/">California Immunization Registry </a>
      <br />
      <a href="/regal_prod/index.cfm/provider-resources/electronic-claims/">Electronic Claims</a>
      <br />
      <a href="/regal_prod/index.cfm/provider-resources/compliance-newsletter/">Compliance News Letter</a>
      <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">
      <a href="/regal_prod/index.cfm/news-events/we-speak-your-language/">We Speak your Language</a>
      <br />
      <a href="/regal_prod/index.cfm/news-events/heritage-touchpoints-newsletter/">Heritage Newsletter</a>
      <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">
      <a href="/regal_prod/index.cfm/careers/why-join-us/">Why Join Us</a>
      <br />
      <a href="/regal_prod/index.cfm/careers/administrative-careers/">Administrative Careers</a>
      <br />
      <a href="/regal_prod/index.cfm/careers/provider-careers/">Provider Careers</a>
      <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">
      <a href="http://oc2-web03/regal_prod/index.cfm/contact/">Contact</a>
      <br />
      <a href="http://oc2-web03/regal_prod/index.cfm/brokers/">Brokers</a>
      <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>

Comments