CCGA Component Library

Accordion 

<!-- Accordion -->
<div class="js-accordion accordion">
    <div class="fs-row">
        <div class="fs-cell">
            <div class="accordion_inner">
                <div class="accordion_header">
                    <h2 class="accordion_title">
                        <span class="accordion_title_label">Accordion</span>
                    </h2>
                    <div class="accordion_description">
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae.</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">Item One</span>
                                        <span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="Item One Quam Bibendum Pellentesque Tellus">

                            <p>Praesent commodo cursus magna</p>
                            <ul>
                                <li>Testing list items</li>
                                <li>Testing list items</li>
                                <li>Testing list items</li>
                                <li>Testing list items</li>
                            </ul>

                        </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">June 16</span>
                                        <span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="June 16 Quam Bibendum Pellentesque Tellus">
                            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-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">Item Three</span>
                                        <span class="accordion_item_heading_subtitle">Doloremque laudantium</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="Item Three Doloremque laudantium">
                            Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. <a href="#">Nemo Enim Ipsam</a> voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.
                        </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">August 12 - August 17</span>
                                        <span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="August 12 - August 17 Quam Bibendum Pellentesque Tellus">
                            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">Lorem Tellus Sollicitudin Mollis</span>
                                        <span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="Lorem Tellus Sollicitudin Mollis Quam Bibendum Pellentesque Tellus">
                            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-6 accordion_item">
                        <h3 class="accordion_item_heading">
                            <button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-1-6">
                                <span class="accordion_item_heading_inner">
                                    <span class="accordion_item_heading_label">
                                        <span class="accordion_item_heading_title">Vulputate Porta Egestas Magna Dolor</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="Vulputate Porta Egestas Magna Dolor">
                            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-7 accordion_item">
                        <h3 class="accordion_item_heading">
                            <button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-1-7">
                                <span class="accordion_item_heading_inner">
                                    <span class="accordion_item_heading_label">
                                        <span class="accordion_item_heading_title">Lorem Tellus Sollicitudin Mollis</span>
                                        <span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
                                    </span>
                                    <span class="accordion_item_heading_icon"></span>
                                </span>
                            </button>
                        </h3>
                        <div class="js-accordion-content accordion_item_content typography" aria-label="Lorem Tellus Sollicitudin Mollis Quam Bibendum Pellentesque Tellus">
                            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">
			<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 %}
					<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>
				</div>
		</div>
	</div>
</div>
<!-- END: Accordion -->

No notes defined.