LP6 Style Guide: Toggles/Accordion

Note: content for demonstration purposes only.

HTML Code Snippet

					
<div class="acc-toggle" id="ac_expand_0">
    <div class="ac_expand"><h3>Toggle Group Title</h3><a class="acc-toggle-swap button button-primary" href="javascript:void(0);">Expand All</a></div>
    <button class="acc-toggle-title" aria-expanded="false" aria-controls="toggle1-1">What is financial aid?</button>
    <div id="toggle1-1" class="acc-toggle-content">
    <p>Financial aid is funding intended to help students pay for their college education, including: tuition and fees, room and board, books and supplies, and other education-related expenses. Various types of financial aid are available, so please review our options listed in the <a href="/tuition-and-financing/paying-for-school/">paying for school section</a>.</p>
    <p>You can also view "<a href="http://apus.financialaidtv.com/#playlist-1644:video-0" target="_blank">The Basics</a>" video in our <a href="http://apus.financialaidtv.com/" target="_blank">Financial Aid TV</a> series.</p>
    </div>
    <button class="acc-toggle-title" aria-expanded="false" aria-controls="toggle1-2">Are all of the university's programs eligible for financial aid?</button>
    <div id="toggle1-2" class="acc-toggle-content">
    <p>While the majority of our programs are eligible for financial aid, these programs are NOT eligible:</p>
    <ul>
        <li>Courses being taking as “audit”</li>
        <li>Undergraduate courses for transfer to another institution</li>
        <li>Associate of Arts (A.A.) and Bachelor’s of Arts (B.A.) in General Studies</li>
        <li>Our 3-course learning track programs</li>
    </ul>
    </div>
    <button class="acc-toggle-title" aria-expanded="false" aria-controls="toggle1-3">Does financial aid cover fees?</button>
    <div id="toggle1-3" class="acc-toggle-content">
    <p>Financial aid is intended to cover the cost of tuition, fees, books, etc., but only the tuition is paid directly to the university. Any funds that remain after tuition is paid are credited back to you in the form of a "financial aid credit balance refund", based on your credit balance selection. You are responsible for paying for fees when they are due (at course registration, for graduation, etc.), however, you can use your financial aid credit balance refund money to help cover the money you spent on fees.</p>
    </div>
    <button class="acc-toggle-title" aria-expanded="false" aria-controls="toggle1-4">I’m a graduate student; will financial aid cover my books?</button>
    <div id="toggle1-4" class="acc-toggle-content">
    <p>As a graduate student you are responsible for purchasing books, ebooks, or other required reading materials. Your financial aid package is intended to cover the cost of tuition, fees, books, etc., but only the tuition is paid directly to the university. Any funds that remain after tuition is paid are credited back to you in the form of a "financial aid credit balance refund", based on your credit balance selection. You have the option to use this credit balance to help cover the costs of your books.</p>
    </div>
    <button class="acc-toggle-title" aria-expanded="false" aria-controls="toggle1-5">Why am I not receiving emails from the financial aid office?</button>
    <div id="toggle1-5" class="acc-toggle-content">
    <p>If you are not receiving any emails from the financial aid department, please make sure to check your “spam” folder. You can also adjust your settings in your email to accept emails from senders “@apus.edu”.&nbsp; To ensure the university receives your email, please be sure to use your campus mailbox in the ecampus.</p>
    </div>
    <button class="acc-toggle-title" aria-expanded="false" aria-controls="toggle1-6">What is the contact information and hours for the financial aid office?</button>
    <div id="toggle1-6" class="acc-toggle-content">
    <p>If you have questions regarding your financial aid status:</p>
    <ul>
        <li>Log into the My Aid Portal (MAP) to check your financial aid status</li>
        <li>Contact our student support center by calling 877-755-2787 (Mon – Fri 8 a.m. to 5 p.m. ET) or by emailing <a rel="" accesskey="" title="" mailtosubject="" mailtobcc="" mailtocc="" mailtoaddress="finaid@apus.edu" popupheight="" popupwidth="" localanchor="" showtoolbar="No" newwindow="No" seid="" externallink="" linktype="MAILTO" href="mailto:finaid@apus.edu">finaid@apus.edu</a></li>
    </ul>
    <p><strong>Financial aid customer service fax number:</strong> 304-724-3710</p>
    <p><strong>Financial aid application fax number:</strong> 877-372-3292</p>
    </div>
    </div>
					
				

General Guidance

The toggle component delivers large amounts of content in a small space through progressive disclosure, i.e. the user is presented key details about the underlying content and can choose to expand that content within the constraints of the toggle. Toggles work especially well on mobile interfaces or whenever vertical space is at a premium.

Avoid “nested” toggles, i.e. collapsible content within collapsible content. This type of pattern goes against UX best practices.

A +/- icon is used to indicate the “expand/collapse” action, though the entire toggle header area is clickable for the same action.

Accessibility

The toggle component provides a vertically stacked layout for web content, commonly used to reduce scrolling. The toggle title/header is a button that is used to expand and collapse each toggle panel. Buttons are used so that the toggles are tab-able by keyboard users and accessible to screen readers. Tab key and Shift-Tab keys are used to navigate through each toggle header and all focusable elements in the toggle should be included in the page Tab sequence. The Enter or Space key expand and collapse each toggle panel.

WAI-ARIA roles and states are used to ensure the component is accessible to people using assistive technologies. When an toggle panel is collapsed the content is hidden so the ARIA state, aria-expanded="false" advises users of assistive technologies that the toggle panel is not visible. When the toggle header is expanded the ARIA state changes to aria-expanded="true" and the toggle panel content is displayed. Each toggle header contains a label, and the header buttons have a aria-control property set that points to the unique id of the panel it controls. When focus is on the toggle header there is a prominent style change to the border as well as background of the toggle header.

JavaScript

The toggle functionality itself is controlled via JS. These control scripts are located in the /common/js/script-common-lp6.js file. If JS is disabled, the toggles will be expanded by default and always show their contents.

TBD