New College of Florida Component Library

Accordion 

<!-- Accordion -->
<div class="js-accordion accordion">
    <div class="fs-row">
        <div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
            <div class="accordion_inner">
                <div class="accordion_header">
                    <h2 class="accordion_title">
                        <span class="accordion_title_label">Admissions Deadlines</span>
                    </h2>
                    <div class="accordion_description">
                        <p>Students who receive financial aid have a special obligation to complete their contracts and ISPs satisfactorily and on time. An Incomplete or Unsatisfactory contract or ISP puts aid at risk. If students have any questions regarding the financial aid implications for any aspects of their contract, they should speak with the Office of Admissions and Financial Aid.</p>
                    </div>
                </div>

                <div class="accordion_items">
                    <div class="js-accordion-item js-accordion-item-1-1 accordion_item">
                        <h3 class="accordion_item_heading">
                            <button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-1-1">
                                <span class="accordion_item_heading_inner">
                                    <span class="accordion_item_heading_label">
                                        <span class="accordion_item_heading_title">What is SAP?</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="What is SAP?">
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href='#'>Donec ullamcorper nulla</a> non metus auctor fringilla.
                        </div>
                    </div>
                    <div class="js-accordion-item js-accordion-item-1-2 accordion_item">
                        <h3 class="accordion_item_heading">
                            <button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-1-2">
                                <span class="accordion_item_heading_inner">
                                    <span class="accordion_item_heading_label">
                                        <span class="accordion_item_heading_title">Does a dropped course count as an attempt?</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="Does a dropped course count as an attempt?">
                            Satisfactory Academic Progress for Financial Aid Purposes (SAP) is checked in January and June as a part of the college’s participation in Federal Financial Aid programs. The office of Admissions and Financial Aid checks the following aspects of SAP.
                        </div>
                    </div>
                    <div class="js-accordion-item js-accordion-item-1-3 accordion_item">
                        <h3 class="accordion_item_heading">
                            <button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-1-3">
                                <span class="accordion_item_heading_inner">
                                    <span class="accordion_item_heading_label">
                                        <span class="accordion_item_heading_title">What about Bright Futures?</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="What about Bright Futures?">
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href='#'>Donec ullamcorper nulla</a> non metus auctor fringilla.
                        </div>
                    </div>
                    <div class="js-accordion-item js-accordion-item-1-4 accordion_item">
                        <h3 class="accordion_item_heading">
                            <button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-1-4">
                                <span class="accordion_item_heading_inner">
                                    <span class="accordion_item_heading_label">
                                        <span class="accordion_item_heading_title">Does a dropped course count as an attempt?</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="Does a dropped course count as an attempt?">
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href='#'>Donec ullamcorper nulla</a> non metus auctor fringilla.
                        </div>
                    </div>
                    <div class="js-accordion-item js-accordion-item-1-5 accordion_item">
                        <h3 class="accordion_item_heading">
                            <button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-1-5">
                                <span class="accordion_item_heading_inner">
                                    <span class="accordion_item_heading_label">
                                        <span class="accordion_item_heading_title">What happens if I have multiple “Unsatisfactory” contracts?</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="What happens if I have multiple “Unsatisfactory” contracts?">
                            Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href='#'>Donec ullamcorper nulla</a> non metus auctor fringilla.
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- END: Accordion -->
 
{% set id = uniqid("js-accordion-item") %}
{% set group_id = uniqid("accordion-group") %}

<!-- Accordion -->
<div class="js-accordion accordion">
	<div class="fs-row">
		<div class="fs-cell fs-lg-10 fs-xl-8 fs-lg-justify-center">
			<div class="accordion_inner">
				{% if title or description %}
					<div class="accordion_header">
						{% if title %}
							<h2 class="accordion_title">
								<span class="accordion_title_label">{{ title }}</span>
							</h2>
						{% endif %}
						{% if description %}
							<div class="accordion_description">
								<p>{{ description }}</p>
							</div>
						{% endif %}
					</div>
				{% endif %}

				{% if items|length %}
					<div class="accordion_items">
						{% for item in items %}
							<div class="js-accordion-item {{ id }}-{{ loop.index }} accordion_item">
								{% if item.title %}
									<h3 class="accordion_item_heading">
									{% else %}
										<h2 class="accordion_item_heading">
										{% endif %}
										<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".{{ id }}-{{ loop.index }}" {% if grouped %} data-swap-group="{{ group_id }}" {% endif %}>
											<span class="accordion_item_heading_inner">
												<span class="accordion_item_heading_label">
													<span class="accordion_item_heading_title">{{ item.title }}</span>
													{% if item.subtitle %}
														<span class="accordion_item_heading_subtitle">{{ item.subtitle }}</span>
													{% endif %}
												</span>
												<span class="accordion_item_heading_icon"></span>
											</span>
										</button>
										{% if item.title %}
										</h3>
								{% else %}
									</h2>
								{% endif %}
								<div class="js-accordion-content accordion_item_content typography" aria-label="{{ item.title }}{% if item.subtitle %} {{ item.subtitle }}{% endif %}">
									{{ item.description }}
								</div>
							</div>
						{% endfor %}
					</div>
				{% endif %}
			</div>
		</div>
	</div>
</div>
<!-- END: Accordion -->

No notes defined.