Skip to main content

Collapse

    Collapse

    Collapse components for individual collapses or accordion groups, utilizing Bootstrap 4's collapse plugin.

    Links:

    Confluence

    Overview

    The Collapse component c-collapse utilizes the Bootstrap 4 collapse plugin to hide and show content, or alternatively, a group of Collapse components with accordion functionality. This component give us discrete user interface style, but you could attach the required data attributes to any clickable element to trigger a collapse.

    Requiring Bootstrap Collapse

    You'll need to include the Bootstrap 4 collapse plugin as a dependency in your project for collapse to function.

    Read more about Bootstrap 4 collapse Open in a new tab to see more options.

    Accordion

    Collapse components can be grouped into accordions by specifying the [data-parent] attribute to the container element's id.

    You can also show the content of a collapse by adding the Bootstrap class show as demonstrated in the accordion below.

    How is Transcatheter Aortic Valve Replacement (TAVR) Performed?

    During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.

    The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.

    NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

    <div id="collapse-accordion-example">
  <div class="c-collapse">
    <h3 class="nyp-type-h5 u-m-b-0">
      <a href="#collapse-1" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-1" aria-controls="collapse-1" aria-expanded="true" role="button">
        How is Transcatheter Aortic Valve Replacement (TAVR) Performed?
      </a>
    </h3>
    <div class="c-collapse__collapse collapse show" id="collapse-1" data-parent="#collapse-accordion-example">
      <div class="c-collapse__content">
        <p>During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.
        <p>The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.</p>
        <p>NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.</p>
      </div>
    </div>
  </div>
  <div class="c-collapse">
    <h3 class="nyp-type-h5 u-m-b-0">
      <a href="#collapse-2" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-2" aria-controls="collapse-2" aria-expanded="false" role="button">
        Do I Qualify for Transcatheter Aortic Valve Replacement (TAVR)?
      </a>
    </h3>
    <div class="c-collapse__collapse collapse" id="collapse-2" data-parent="#collapse-accordion-example">
      ...
    </div>
  </div>
  <div class="c-collapse">
    <h3 class="nyp-type-h5 u-m-b-0">
      <a href="#collapse-3" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-3" aria-controls="collapse-3" aria-expanded="false" role="button">
        Transcatheter Aortic Valve Replacement (TAVR) at NYP
      </a>
    </h3>
    <div class="c-collapse__collapse collapse" id="collapse-3" data-parent="#collapse-accordion-example">
      ...
    </div>
  </div>
</div>

    Accordion with body font 18px

    Collapse components can be grouped into accordions by specifying the [data-parent] attribute to the container element's id.

    You can also show the content of a collapse by adding the Bootstrap class show as demonstrated in the accordion below.

    How is Transcatheter Aortic Valve Replacement (TAVR) Performed?

    During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.

    The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.

    NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

    Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.

    Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

    <div id="collapse-accordion-example1" class="u-body-text-18">
  <div class="c-collapse">
    <h3 class="nyp-type-h5 u-m-b-0">
      <a href="#collapse-1" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-1" aria-controls="collapse-1" aria-expanded="true" role="button">
        How is Transcatheter Aortic Valve Replacement (TAVR) Performed?
      </a>
    </h3>
    <div class="c-collapse__collapse collapse show" id="collapse-1" data-parent="#collapse-accordion-example1">
      <div class="c-collapse__content">
        <p>During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.
        <p>The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.</p>
        <p>NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.</p>
      </div>
    </div>
  </div>
  <div class="c-collapse">
    <h3 class="nyp-type-h5 u-m-b-0">
      <a href="#collapse-2" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-2" aria-controls="collapse-2" aria-expanded="false" role="button">
        Do I Qualify for Transcatheter Aortic Valve Replacement (TAVR)?
      </a>
    </h3>
    <div class="c-collapse__collapse collapse" id="collapse-2" data-parent="#collapse-accordion-example1">
      ...
    </div>
  </div>
  <div class="c-collapse">
    <h3 class="nyp-type-h5 u-m-b-0">
      <a href="#collapse-3" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-3" aria-controls="collapse-3" aria-expanded="false" role="button">
        Transcatheter Aortic Valve Replacement (TAVR) at NYP
      </a>
    </h3>
    <div class="c-collapse__collapse collapse" id="collapse-3" data-parent="#collapse-accordion-example1">
      ...
    </div>
  </div>
</div>

    Collapse Bar

    The collapse bar component gives us a high impact user interface component, useful for situations like search filters or hidden important content.

    During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.

    The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.

    NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.

    <div class="c-collapse">
  <h3 class="nyp-type-h5 u-m-b-0">
    <a href="#collapse-bar" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-bar" aria-controls="collapse-bar" aria-expanded="false">
      How is Transcatheter Aortic Valve Replacement (TAVR) Performed?
    </a>
  </h3>
  <div class="collapse" id="collapse-bar">
    <div class="c-collapse__content">
      <p>During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.
      <p>The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.</p>
      <p>NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.</p>
    </div>
  </div>
</div>

    Collapse Bar with body font 18px

    The collapse bar component gives us a high impact user interface component, useful for situations like search filters or hidden important content.

    During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.

    The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.

    NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.

    <div class="c-collapse u-body-text-18">
  <h3 class="nyp-type-h5 u-m-b-0">
    <a href="#collapse-bar" class="c-collapse__button" data-toggle="collapse" data-target="#collapse-bar" aria-controls="collapse-bar" aria-expanded="false">
      How is Transcatheter Aortic Valve Replacement (TAVR) Performed?
    </a>
  </h3>
  <div class="collapse" id="collapse-bar">
    <div class="c-collapse__content">
      <p>During TAVR, surgeons insert a catheter into a blood vessel through a small incision in the patient's leg. They then guide it to the heart, where they carefully position the device in the valve and retract the catheter lorem ipsum amet dolor sit mel alem.
      <p>The patient remains under general anesthesia throughout the procedure and may be discharged from the hospital within 48 hours. There is no surgical wound beyond the small puncture mark where surgeons inserted the catheter. After the procedure, this is covered with a small adhesive strip.</p>
      <p>NewYork-Presbyterian physicians were the principal investigators of the national clinical trials establishing the effectiveness of this minimally invasive procedure.</p>
    </div>
  </div>
</div>