Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/cvquality_boot.css, line 8621

4.1.2 Modern Accordion - Standalone

Each standalone accordion item operates independently, so multiple items can be open at the same time. To have independent behavior, use "Accordion Item" template.

Example

Default styling

Learn about ACC

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine

Become a member

Lorem Ipsum

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Pellentesque sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis.

Header Level 2

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.

Header Level 3

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
Table of Contents
  1. How to Prepare for the Boards
  2. General Principles of Cardiovascular Medicine
  3. Arrhythmias
  4. Coronary Artery Disease
  5. Heart Failure & Cardiomyopathy
  6. Valvular Disease
  7. Pericardial Disease
  8. Congenital Heart Disease
  9. Vascular Diseases
  10. Systemic Hypertension and Hypotension
  11. Pulmonary Circulation Disorders
  12. Systemic Disorders Affecting the Circulatory System
  13. Miscellaneous
    • Cardiovascular Genetics
    • CPR, Post-Resuscitation Care
    • Cardiac Critical Care
    • Sleep Disordered Breathing
    • Sports Cardiology
    • Pregnancy and Cardiac Disease
    • Cardiovascular Operative Management
    • Pharmacology
    • General Principles of Cardiovascular Medicine
<div class="relative">
	<section aria-label="">
		<details accordion name="" class="isolation_isolate m-b_3">
			<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
				<hgroup class="flex flex_row">
					<span class="fa-stack flex_shrink m_2 br_radius">
						<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
						<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
					</span>
					<h3 class="flex_auto m-y_2 inline-block self_center">Learn about ACC</h3>
				</hgroup>
			</summary>
			<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
				<div data-content>
				<div class="reading-typography ">
				    <h1>Lorem Ipsum</h1>
				    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
				    <h2>Header Level 2</h2>
				    <ol>
				        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				        <li>Aliquam tincidunt mauris eu risus.</li>
				    </ol>
				    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
				    <h3>Header Level 3</h3>
				    <ul>
				        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				        <li>Aliquam tincidunt mauris eu risus.</li>
				    </ul>
				    <button class="btn btn-primary">Button</button>
					<details>
				        <summary ><strong>Table of Contents</strong></summary>
				        <div>
				            <ol>
				                <li data-line="0" dir="auto">How to Prepare for the Boards</li>
				                <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
				                </li>
				                <li data-line="2" dir="auto">Arrhythmias</li>
				                <li data-line="3" dir="auto">Coronary Artery Disease</li>
				                <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
				                <li data-line="5" dir="auto">Valvular Disease</li>
				                <li data-line="6" dir="auto">Pericardial Disease</li>
				                <li data-line="7" dir="auto">Congenital Heart Disease</li>
				                <li data-line="8" dir="auto">Vascular Diseases</li>
				                <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
				                <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
				                <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
				                    System</li>
				                <li data-line="12" dir="auto">
				                    Miscellaneous
				                    <ul>
				                        <li data-line="13" dir="auto">Cardiovascular Genetics</li>
				                        <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
				                        <li data-line="15" dir="auto">Cardiac Critical Care</li>
				                        <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
				                        <li data-line="17" dir="auto">Sports Cardiology</li>
				                        <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
				                        <li data-line="19" dir="auto">Cardiovascular Operative Management
				                        </li>
				                        <li data-line="20" dir="auto">Pharmacology</li>
				                        <li data-line="21" dir="auto">General Principles of Cardiovascular
				                            Medicine</li>
				                    </ul>
				                </li>
				            </ol>
				        </div>
				    </details>
				</div>				</div>
			</div>
		</details>
		<details accordion name="" class="isolation_isolate m-b_3">
			<summary class="sticky inset_0 b_auto z_3 bg_white h:bg_primary-5 c_primary-n2 br_radius shadow_bevel-light br_solid br_1 br_black-2">
				<hgroup class="flex flex_row">
					<span class="fa-stack flex_shrink m_2 br_radius">
						<i class="fa-solid fa-minus fa-stack-1x" aria-hidden="true"></i>
						<i class="fa-solid fa-minus rotate_90 a:rotation fa-stack-1x" aria-hidden="true"></i>
					</span>
					<h3 class="flex_auto m-y_2 inline-block self_center">Become a member</h3>
				</hgroup>
			</summary>
			<div id="SanitizedLabel" class="z_0 bg_black-_05 br-bl_radius br-br_radius m-x_3:md p_3 p_4:md reading-typography shadow_emboss-light transition_4 m-b_2">
				<div data-content>
				<div class="reading-typography ">
				    <h1>Lorem Ipsum</h1>
				    <p><strong>Pellentesque habitant morbi tristique</strong> senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. <a href="#random2" target="_blank">Pellentesque</a> sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em> Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#random">Donec non enim</a> in turpis pulvinar facilisis. Ut felis.</p>
				    <h2>Header Level 2</h2>
				    <ol>
				        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				        <li>Aliquam tincidunt mauris eu risus.</li>
				    </ol>
				    <blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus magna. Cras in mi at felis aliquet congue. Ut a est eget ligula molestie gravida. Curabitur massa. Donec eleifend, libero at sagittis mollis, tellus est malesuada tellus, at luctus turpis elit sit amet quam. Vivamus pretium ornare est.</p></blockquote>
				    <h3>Header Level 3</h3>
				    <ul>
				        <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
				        <li>Aliquam tincidunt mauris eu risus.</li>
				    </ul>
				    <button class="btn btn-primary">Button</button>
					<details>
				        <summary ><strong>Table of Contents</strong></summary>
				        <div>
				            <ol>
				                <li data-line="0" dir="auto">How to Prepare for the Boards</li>
				                <li data-line="1" dir="auto">General Principles of Cardiovascular Medicine
				                </li>
				                <li data-line="2" dir="auto">Arrhythmias</li>
				                <li data-line="3" dir="auto">Coronary Artery Disease</li>
				                <li data-line="4" dir="auto">Heart Failure &amp; Cardiomyopathy</li>
				                <li data-line="5" dir="auto">Valvular Disease</li>
				                <li data-line="6" dir="auto">Pericardial Disease</li>
				                <li data-line="7" dir="auto">Congenital Heart Disease</li>
				                <li data-line="8" dir="auto">Vascular Diseases</li>
				                <li data-line="9" dir="auto">Systemic Hypertension and Hypotension</li>
				                <li data-line="10" dir="auto">Pulmonary Circulation Disorders</li>
				                <li data-line="11" dir="auto">Systemic Disorders Affecting the Circulatory
				                    System</li>
				                <li data-line="12" dir="auto">
				                    Miscellaneous
				                    <ul>
				                        <li data-line="13" dir="auto">Cardiovascular Genetics</li>
				                        <li data-line="14" dir="auto">CPR, Post-Resuscitation Care</li>
				                        <li data-line="15" dir="auto">Cardiac Critical Care</li>
				                        <li data-line="16" dir="auto">Sleep Disordered Breathing</li>
				                        <li data-line="17" dir="auto">Sports Cardiology</li>
				                        <li data-line="18" dir="auto">Pregnancy and Cardiac Disease</li>
				                        <li data-line="19" dir="auto">Cardiovascular Operative Management
				                        </li>
				                        <li data-line="20" dir="auto">Pharmacology</li>
				                        <li data-line="21" dir="auto">General Principles of Cardiovascular
				                            Medicine</li>
				                    </ul>
				                </li>
				            </ol>
				        </div>
				    </details>
				</div>				</div>
			</div>
		</details>
	</section>
</div>
Copy Code