Accordion

Faq question will display here in 20 point tungsten semi-bold right here in this location on one or two lines of text at max width of 640 pixels. Module expands and contracts on click?

click to expand

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries placeholder copy content here. Lorem ipsum dolar.

i Accordion

Faq question will display here in 20 point tungsten semi-bold right here in this location on one or two lines of text at max width of 640 pixels. Module expands and contracts on click?

click to expand

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries placeholder copy content here. Lorem ipsum dolar.

i Accordion

Markup

<div class="accordion-wrap single">

	<div class="section-heading">

		<h2>Faq question will display here in 20 point tungsten semi-bold right here in this location on one or two lines of text at max width of 640 pixels. Module expands and contracts on click?</h2>

		<a href="#" class="button-accordion">
			<span class="text">
				click to expand
			</span>
			<i class="icon icon-arrow">
				<svg><use xlink:href="img/spritemap.svg#icon-plus-circle"></use><svg>
			</i>
		</a>

	</div>

	<div class="accordion-content">

		<div class="copy-wrap">

			<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries placeholder copy content here. Lorem ipsum dolar.</p>
		</div>

	</div>

	<!-- Do not implement this link -->
	<a href="/inc/modules/?module=accordion" class="module-link">
		<i class="icon info-icon">i</i>
		<span class="tool-tip">Accordion</span>
	</a>
	<!-- Do not implement this link -->

	
</div>

Used for support to content or on specific FAQ pages. Set up as accordions to save real-estate. A hit anywhere on the container will trigger expansion and another will collapse it.