<div style="margin: 25px 0">
<h3>Example One (flat)</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoOne.expandContainer()">Expand Container</button>
<button onclick="demoOne.collapseContainer()">Collapse Container</button>
<button onclick="demoOne.enableDragging()">Enable Dragging</button>
<button onclick="demoOne.disableDragging()">Disable Dragging</button>
</div>
</div>
<div class="acl-collapsible-container acl-collapsible-container--flat acl-collapsible-container--rounded-corners demoOne">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
<div class="acl-collapsible-container__body">
<div style="font-size: 14px; padding: 0 20px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. <strong>Porttitor</strong> rhoncus dolor purus non enim <u>praesent elementum
facilisis</u> leo. Accumsan lacus
vel
facilisis volutpat <i>est velit egestas</i> dui id.
</p>
<p>Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam.
Elit ut aliquam <a href="https://aforza.com">purus sit amet luctus</a> venenatis. Augue ut lectus arcu
bibendum at varius vel pharetra.
Amet
justo donec enim diam vulputate ut pharetra sit amet. Nisl purus in mollis nunc. Amet mattis vulputate
enim
nulla aliquet porttitor lacus luctus. Massa massa ultricies mi quis hendrerit.
</p>
<p><strong>Cursus euismod quis viverra nibh</strong>
<i>cras pulvinar mattis. Enim nunc faucibus a pellentesque sit. Risus viverra adipiscing at in
tellus.</i>
</p>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Two (rasied)</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoTwo.expandContainer()">Expand Container</button>
<button onclick="demoTwo.collapseContainer()">Collapse Container</button>
<button onclick="demoTwo.enableDragging()">Enable Dragging</button>
<button onclick="demoTwo.disableDragging()">Disable Dragging</button>
</div>
</div>
<div class="acl-collapsible-container acl-collapsible-container--raised acl-collapsible-container--rounded-corners demoTwo">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
<div class="acl-collapsible-container__body">
<div class="acl-data-table acl-draggable-list">
<table class="acl-data-table__table" aria-label="Route Stops">
<thead>
<tr class="acl-data-table__header-row acl-data-table__header-row--condensed">
<th class="acl-data-table__header-cell acl-data-table__header-cell--numeric" role="columnheader" scope="col"></th>
<th class="acl-data-table__header-cell acl-data-table__header-cell--condensed" role="columnheader" scope="col">Account Name</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col">Address</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col">Contact</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col">Date: Last Visit</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col"></th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col"></th>
</tr>
</thead>
<tbody class="acl-data-table__content">
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">1</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">2</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">3</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">4</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">5</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">6</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Three</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoThree.expandContainer()">Expand Container</button>
<button onclick="demoThree.collapseContainer()">Collapse Container</button>
<button onclick="demoThree.enableDragging()">Enable Dragging</button>
<button onclick="demoThree.disableDragging()">Disable Dragging</button>
</div>
</div>
<div class="acl-collapsible-container acl-collapsible-container--raised acl-collapsible-container--rounded-corners demoThree" style="max-width:380px">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
<div class="acl-collapsible-container__body">
<div class="acl-horizontal-scroller acl-horizontal-scroller-demo4">
<div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
<i class="aforza-icons animated fadeIn">acl_arrow_left</i>
</div>
<div class="acl-horizontal-scroller__items">
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link" title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Four (disabled)</h3>
<div style="width: 450px;display:flex;flex-wrap:wrap">
<button onclick="demoFour.disableContainer(true)">Disable Container (Expanded) </button>
<button onclick="demoFour.enableContainer(true)">Enable Container (Expanded) </button>
<button onclick="demoFour.disableContainer(false)">Disable Container (Collapsed) </button>
<button onclick="demoFour.enableContainer(false)">Enable Container (Collapsed) </button>
<button onclick="demoFour.enableDragging()">Enable Dragging</button>
<button onclick="demoFour.disableDragging()">Disable Dragging</button>
</div>
</div>
<div class="acl-collapsible-container acl-collapsible-container--flat acl-collapsible-container--rounded-corners demoFour">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-collapsible-container__body">
<div style="font-size: 14px; padding: 0 20px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. <strong>Porttitor</strong> rhoncus dolor purus non enim <u>praesent elementum
facilisis</u> leo. Accumsan lacus
vel
facilisis volutpat <i>est velit egestas</i> dui id.
</p>
<p>Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam.
Elit ut aliquam <a href="https://aforza.com">purus sit amet luctus</a> venenatis. Augue ut lectus arcu
bibendum at varius vel pharetra.
Amet
justo donec enim diam vulputate ut pharetra sit amet. Nisl purus in mollis nunc. Amet mattis vulputate
enim
nulla aliquet porttitor lacus luctus. Massa massa ultricies mi quis hendrerit.
</p>
<p><strong>Cursus euismod quis viverra nibh</strong>
<i>cras pulvinar mattis. Enim nunc faucibus a pellentesque sit. Risus viverra adipiscing at in
tellus.</i>
</p>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Five (Data attribute 'data-prevent-collapse' prevents container functionality)</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoFive.expandContainer()">Expand Container</button>
<button onclick="demoFive.collapseContainer()">Collapse Container</button>
<button onclick="demoFive.enableDragging()">Enable Dragging</button>
<button onclick="demoFive.disableDragging()">Disable Dragging</button>
</div>
</div>
<div class="acl-collapsible-container acl-collapsible-container--flat acl-collapsible-container--rounded-corners demoFive">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title" data-prevent-collapse>Clicking me won't expand the container</div>
</div>
<div class="acl-collapsible-container__header-actions">
<div class="acl-button__icon-button acl-button__icon-button--extra-small acl-button__icon-button--basic" style="margin-right: 15px" data-prevent-collapse>
<i class="aforza-icons acl-button__icon-label" data-prevent-collapse>acl_delete</i>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
</div>
<div class="acl-collapsible-container__body">
<div style="font-size: 14px; padding: 0 20px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. <strong>Porttitor</strong> rhoncus dolor purus non enim <u>praesent elementum
facilisis</u> leo. Accumsan lacus
vel
facilisis volutpat <i>est velit egestas</i> dui id.
</p>
<p>Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam.
Elit ut aliquam <a href="https://aforza.com">purus sit amet luctus</a> venenatis. Augue ut lectus arcu
bibendum at varius vel pharetra.
Amet
justo donec enim diam vulputate ut pharetra sit amet. Nisl purus in mollis nunc. Amet mattis vulputate
enim
nulla aliquet porttitor lacus luctus. Massa massa ultricies mi quis hendrerit.
</p>
<p><strong>Cursus euismod quis viverra nibh</strong>
<i>cras pulvinar mattis. Enim nunc faucibus a pellentesque sit. Risus viverra adipiscing at in
tellus.</i>
</p>
</div>
</div>
</div>
<style>
button {
font-size: 11px;
margin: 5px;
}
</style>
<script>
// DEMO 1 //
const collapsibleContainer = document.querySelector('.demoOne');
const demoOne = new acl.ACLCollapsibleContainer(collapsibleContainer);
collapsibleContainer.addEventListener('expandedstatechange', event => {
console.log(event.detail)
});
// DEMO 1 - END //
// DEMO 2 //
const collapsibleContainerTwo = document.querySelector('.demoTwo');
const dataTable = new acl.MDCDataTable(document.querySelector('.acl-data-table'));
const demoTwo = new acl.ACLCollapsibleContainer(collapsibleContainerTwo);
// DEMO 2 - END /
// DEMO 3 /
const collapsibleContainerThree = document.querySelector('.demoThree');
const demoThree = new acl.ACLCollapsibleContainer(collapsibleContainerThree, true);
const scrollerEl3 = document.querySelector('.acl-horizontal-scroller-demo4');
const horizontalScroller3 = new acl.ACLHorizontalScroller(scrollerEl3);
// DEMO 3 - END /
// DEMO 4 //
const collapsibleContainerFour = document.querySelector('.demoFour');
const demoFour = new acl.ACLCollapsibleContainer(collapsibleContainerFour, true, true);
// DEMO 4 - END //
// DEMO 5 //
const collapsibleContainerFive = document.querySelector('.demoFive');
const demoFive = new acl.ACLCollapsibleContainer(collapsibleContainerFive);
// DEMO 5 - END //
</script>
<div style="margin: 25px 0">
<h3>Example One (flat)</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoOne.expandContainer()">Expand Container</button>
<button onclick="demoOne.collapseContainer()">Collapse Container</button>
<button onclick="demoOne.enableDragging()">Enable Dragging</button>
<button onclick="demoOne.disableDragging()">Disable Dragging</button>
</div>
</div>
<div
class="acl-collapsible-container acl-collapsible-container--flat acl-collapsible-container--rounded-corners demoOne">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i
class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
<div class="acl-collapsible-container__body">
<div style="font-size: 14px; padding: 0 20px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. <strong>Porttitor</strong> rhoncus dolor purus non enim <u>praesent elementum
facilisis</u> leo. Accumsan lacus
vel
facilisis volutpat <i>est velit egestas</i> dui id.
</p>
<p>Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam.
Elit ut aliquam <a href="https://aforza.com">purus sit amet luctus</a> venenatis. Augue ut lectus arcu
bibendum at varius vel pharetra.
Amet
justo donec enim diam vulputate ut pharetra sit amet. Nisl purus in mollis nunc. Amet mattis vulputate
enim
nulla aliquet porttitor lacus luctus. Massa massa ultricies mi quis hendrerit.
</p>
<p><strong>Cursus euismod quis viverra nibh</strong>
<i>cras pulvinar mattis. Enim nunc faucibus a pellentesque sit. Risus viverra adipiscing at in
tellus.</i>
</p>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Two (rasied)</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoTwo.expandContainer()">Expand Container</button>
<button onclick="demoTwo.collapseContainer()">Collapse Container</button>
<button onclick="demoTwo.enableDragging()">Enable Dragging</button>
<button onclick="demoTwo.disableDragging()">Disable Dragging</button>
</div>
</div>
<div
class="acl-collapsible-container acl-collapsible-container--raised acl-collapsible-container--rounded-corners demoTwo">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i
class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
<div class="acl-collapsible-container__body">
<div class="acl-data-table acl-draggable-list">
<table class="acl-data-table__table" aria-label="Route Stops">
<thead>
<tr class="acl-data-table__header-row acl-data-table__header-row--condensed">
<th class="acl-data-table__header-cell acl-data-table__header-cell--numeric" role="columnheader"
scope="col"></th>
<th class="acl-data-table__header-cell acl-data-table__header-cell--condensed"
role="columnheader" scope="col">Account Name</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col">Address</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col">Contact</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col">Date: Last Visit</th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col"></th>
<th class="acl-data-table__header-cell" role="columnheader" scope="col"></th>
</tr>
</thead>
<tbody class="acl-data-table__content">
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">1</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a
href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">2</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a
href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">3</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a
href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">4</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a
href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">5</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a
href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
<tr class="acl-data-table__row acl-draggable-list__row">
<td class="acl-data-table__cell acl-draggable-list__route-stage">6</td>
<td class="acl-data-table__cell acl-typography--bold">
<div class="acl-draggable-list__account-name">
<div class="acl-draggable-list__account-type">
<i class="aforza-icons">acl_corner_store</i>
</div>
<div class="acl-draggable-list__acl_corner_store-name">Store Name</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__address">
Landmark Place, Cardiff CF10 2FY
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__contact-details">
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_phone</i>
<div class="acl-draggable-list__phone-number"><a href="tel:029 2037 494">029 2037
494</a>
</div>
</div>
<div class="acl-draggable-list__contact-type">
<i class="aforza-icons">acl_email</i>
<div class="acl-draggable-list__email-address"><a
href="mailto:akathryne@gmail.com">akathryne@gmail.com</a></div>
</div>
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__date">01/07/2020
</div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__grab-indicator"><i class="aforza-icons">acl_move</i></div>
</td>
<td class="acl-data-table__cell">
<div class="acl-draggable-list__remove"><i class="aforza-icons">acl_close_small</i></div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Three</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoThree.expandContainer()">Expand Container</button>
<button onclick="demoThree.collapseContainer()">Collapse Container</button>
<button onclick="demoThree.enableDragging()">Enable Dragging</button>
<button onclick="demoThree.disableDragging()">Disable Dragging</button>
</div>
</div>
<div class="acl-collapsible-container acl-collapsible-container--raised acl-collapsible-container--rounded-corners demoThree"
style="max-width:380px">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i
class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
<div class="acl-collapsible-container__body">
<div class="acl-horizontal-scroller acl-horizontal-scroller-demo4">
<div
class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--left acl-horizontal-scroller__arrow--disabled acl-horizontal-scroller__arrow--hidden">
<i class="aforza-icons animated fadeIn">acl_arrow_left</i>
</div>
<div class="acl-horizontal-scroller__items">
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
<div class="acl-horizontal-scroller__item">
<div style="width: 226px;margin:20px">
<div class="acl-contact-card acl-contact-card--shadow">
<img src="https://placem.at/people" class="acl-contact-card__avatar" />
<div class="acl-contact-card__name">Amanda Martin</div>
<div class="acl-contact-card__location">South-East Manchester,UK</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_email</i></div>
<a href="mailto:lizzie_higgins@astra.com" class="acl-contact-card__link"
title="lizzie_higgins@astra.com">lizzie_higgins@astra.com
</a>
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_phone</i></div>
<a href="tel:03025168623" class="acl-contact-card__link">03025168623
</a>
</div>
<div class="acl-contact-card__divider"></div>
<div class="acl-contact-card__chat-items">
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_whatsapp</i></div>
<a href="#" class="acl-contact-card__link">WhatsApp
</a>
</div>
<div class="acl-contact-card__divider acl-contact-card__divider--vertical">
</div>
<div class="acl-contact-card__contact-item">
<div class="acl-contact-card__icon"><i
class="aforza-icons animated fadeIn">acl_chatter</i></div>
<a href="#" class="acl-contact-card__link">Chatter
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class="acl-horizontal-scroller__arrow acl-horizontal-scroller__arrow--right acl-horizontal-scroller__arrow--hidden">
<i class="aforza-icons animated fadeIn">acl_arrow_right</i>
</div>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Four (disabled)</h3>
<div style="width: 450px;display:flex;flex-wrap:wrap">
<button onclick="demoFour.disableContainer(true)">Disable Container (Expanded) </button>
<button onclick="demoFour.enableContainer(true)">Enable Container (Expanded) </button>
<button onclick="demoFour.disableContainer(false)">Disable Container (Collapsed) </button>
<button onclick="demoFour.enableContainer(false)">Enable Container (Collapsed) </button>
<button onclick="demoFour.enableDragging()">Enable Dragging</button>
<button onclick="demoFour.disableDragging()">Disable Dragging</button>
</div>
</div>
<div
class="acl-collapsible-container acl-collapsible-container--flat acl-collapsible-container--rounded-corners demoFour">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title">Example Title</div>
<div class="acl-collapsible-container__header-subtitle">Example Subtitle</div>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium">
<i class="aforza-icons animated fadeIn">acl_down_arrow</i>
</div>
</div>
<div class="acl-collapsible-container__body">
<div style="font-size: 14px; padding: 0 20px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. <strong>Porttitor</strong> rhoncus dolor purus non enim <u>praesent elementum
facilisis</u> leo. Accumsan lacus
vel
facilisis volutpat <i>est velit egestas</i> dui id.
</p>
<p>Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam.
Elit ut aliquam <a href="https://aforza.com">purus sit amet luctus</a> venenatis. Augue ut lectus arcu
bibendum at varius vel pharetra.
Amet
justo donec enim diam vulputate ut pharetra sit amet. Nisl purus in mollis nunc. Amet mattis vulputate
enim
nulla aliquet porttitor lacus luctus. Massa massa ultricies mi quis hendrerit.
</p>
<p><strong>Cursus euismod quis viverra nibh</strong>
<i>cras pulvinar mattis. Enim nunc faucibus a pellentesque sit. Risus viverra adipiscing at in
tellus.</i>
</p>
</div>
</div>
</div>
<div style="margin: 25px 0">
<h3>Example Five (Data attribute 'data-prevent-collapse' prevents container functionality)</h3>
<div style="width: 500px;display:flex;">
<button onclick="demoFive.expandContainer()">Expand Container</button>
<button onclick="demoFive.collapseContainer()">Collapse Container</button>
<button onclick="demoFive.enableDragging()">Enable Dragging</button>
<button onclick="demoFive.disableDragging()">Disable Dragging</button>
</div>
</div>
<div
class="acl-collapsible-container acl-collapsible-container--flat acl-collapsible-container--rounded-corners demoFive">
<div class="acl-collapsible-container__drag-indicator"><i class="aforza-icons">acl_handle</i></div>
<div class="acl-collapsible-container__header">
<div class="acl-collapsible-container__header-labels">
<div class="acl-collapsible-container__header-title" data-prevent-collapse>Clicking me won't expand the container</div>
</div>
<div class="acl-collapsible-container__header-actions">
<div class="acl-button__icon-button acl-button__icon-button--extra-small acl-button__icon-button--basic" style="margin-right: 15px" data-prevent-collapse>
<i class="aforza-icons acl-button__icon-label" data-prevent-collapse>acl_delete</i>
</div>
<div class="acl-collapsible-container__header-icon acl-collapsible-container__header-icon--medium"><i
class="aforza-icons animated fadeIn">acl_down_arrow</i></div>
</div>
</div>
<div class="acl-collapsible-container__body">
<div style="font-size: 14px; padding: 0 20px 5px;">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore
magna aliqua. <strong>Porttitor</strong> rhoncus dolor purus non enim <u>praesent elementum
facilisis</u> leo. Accumsan lacus
vel
facilisis volutpat <i>est velit egestas</i> dui id.
</p>
<p>Fringilla est ullamcorper eget nulla facilisi etiam dignissim diam.
Elit ut aliquam <a href="https://aforza.com">purus sit amet luctus</a> venenatis. Augue ut lectus arcu
bibendum at varius vel pharetra.
Amet
justo donec enim diam vulputate ut pharetra sit amet. Nisl purus in mollis nunc. Amet mattis vulputate
enim
nulla aliquet porttitor lacus luctus. Massa massa ultricies mi quis hendrerit.
</p>
<p><strong>Cursus euismod quis viverra nibh</strong>
<i>cras pulvinar mattis. Enim nunc faucibus a pellentesque sit. Risus viverra adipiscing at in
tellus.</i>
</p>
</div>
</div>
</div>
<style>
button {
font-size: 11px;
margin: 5px;
}
</style>
<script>
// DEMO 1 //
const collapsibleContainer = document.querySelector('.demoOne');
const demoOne = new acl.ACLCollapsibleContainer(collapsibleContainer);
collapsibleContainer.addEventListener('expandedstatechange', event => {console.log(event.detail)});
// DEMO 1 - END //
// DEMO 2 //
const collapsibleContainerTwo = document.querySelector('.demoTwo');
const dataTable = new acl.MDCDataTable(document.querySelector('.acl-data-table'));
const demoTwo = new acl.ACLCollapsibleContainer(collapsibleContainerTwo);
// DEMO 2 - END /
// DEMO 3 /
const collapsibleContainerThree = document.querySelector('.demoThree');
const demoThree = new acl.ACLCollapsibleContainer(collapsibleContainerThree, true);
const scrollerEl3 = document.querySelector('.acl-horizontal-scroller-demo4');
const horizontalScroller3 = new acl.ACLHorizontalScroller(scrollerEl3);
// DEMO 3 - END /
// DEMO 4 //
const collapsibleContainerFour = document.querySelector('.demoFour');
const demoFour = new acl.ACLCollapsibleContainer(collapsibleContainerFour, true, true);
// DEMO 4 - END //
// DEMO 5 //
const collapsibleContainerFive = document.querySelector('.demoFive');
const demoFive = new acl.ACLCollapsibleContainer(collapsibleContainerFive);
// DEMO 5 - END //
</script>
/* No context defined. */
.acl-collapsible-container {
position: relative;
&--draggable {
.acl-collapsible-container__drag-indicator {
cursor: move;
display: flex;
}
}
&--flat {
border: 1px solid #e8ebf8;
}
&--raised {
box-shadow: 0 2px 8px 2px rgba(0, 0, 0, 0.15);
}
&--rounded-corners {
border-radius: 4px;
}
&__header {
display: flex;
justify-content: space-between;
padding: 12px 20px;
cursor: pointer;
&--disabled {
cursor: default;
}
}
&__header-title {
color: $black;
font-size: 14px;
font-weight: 600;
letter-spacing: 0;
line-height: 16px;
margin-bottom: 5px;
cursor: text;
}
&__header-subtitle {
color: rgba(0, 0, 0, 0.75);
font-size: 12px;
letter-spacing: 0;
line-height: 17px;
cursor: text;
}
&__header-icon {
display: flex;
align-items: center;
user-select: none;
i {
color: #707893; // Candidate for style guide.
font-size: 16px;
}
&--small {
i {
font-size: 14px;
}
}
&--medium {
i {
font-size: 16px;
}
}
&--large {
i {
font-size: 18px;
}
}
&--rotate {
transform: rotate(180deg);
}
}
&__body {
&--hide {
display: none;
}
}
&__drag-indicator {
position: absolute;
background-color: #e4e6ee;
height: 100%;
width: 10px;
display: flex;
justify-content: center;
align-items: center;
display: none;
i {
transform: rotate(90deg);
position: inherit;
left: -8.3px;
color: #adb0b9;
user-select: none;
}
}
&__header-actions {
display: flex;
}
}
class ACLCollapsibleContainer {
constructor(containerEl, isExpanded = false, isDisabled = false) {
this.cssClass = Object.freeze({
HEADER_DISABLED: 'acl-collapsible-container__header--disabled',
CHEVRON_ROTATE: 'acl-collapsible-container__header-icon--rotate',
BODY_HIDE: 'acl-collapsible-container__body--hide',
DRAGGING_ENABLED: 'acl-collapsible-container--draggable',
});
this.selector = Object.freeze({
HEADER: '.acl-collapsible-container__header',
BODY: '.acl-collapsible-container__body',
CHEVRON: '.acl-collapsible-container__header-icon',
});
this.eventName = Object.freeze({
EXPANDED_STATE_CHANGE: 'expandedstatechange',
});
this.containerEl = containerEl;
this.header = this.containerEl.querySelector(this.selector.HEADER);
this.body = this.containerEl.querySelector(this.selector.BODY);
this.cheveron = this.containerEl.querySelector(this.selector.CHEVRON);
this.isExpanded = isExpanded;
this.isDisabled = isDisabled;
this.setDisabled(this.isDisabled, this.isExpanded);
this.setState(this.isExpanded);
this.handleEventListeners();
}
setState(shouldExpand) {
if (shouldExpand) {
if (this.cheveron) this.cheveron.classList.add(this.cssClass.CHEVRON_ROTATE);
this.body.classList.remove(this.cssClass.BODY_HIDE);
this.isExpanded = true;
} else {
this.header.classList.add();
if (this.cheveron) this.cheveron.classList.remove(this.cssClass.CHEVRON_ROTATE);
this.body.classList.add(this.cssClass.BODY_HIDE);
this.isExpanded = false;
}
this.containerEl.dispatchEvent(
new CustomEvent(this.eventName.EXPANDED_STATE_CHANGE, { detail: { isExpanded: this.isExpanded } })
);
}
setDisabled(isDisabled, shouldExpand) {
this.isDisabled = isDisabled;
this.setState(shouldExpand);
if (this.isDisabled) this.header.classList.add(this.cssClass.HEADER_DISABLED);
else this.header.classList.remove(this.cssClass.HEADER_DISABLED);
}
handleEventListeners() {
this.header.addEventListener('click', event => {
if (!this.isDisabled && !event.target.hasAttribute('data-prevent-collapse')) {
this.setState(!this.isExpanded);
}
});
}
expandContainer() {
this.setState(true);
}
collapseContainer() {
this.setState(false);
}
enableDragging() {
this.containerEl.classList.add(this.cssClass.DRAGGING_ENABLED);
}
disableDragging() {
this.containerEl.classList.remove(this.cssClass.DRAGGING_ENABLED);
}
disableContainer(shouldExpand) {
this.setDisabled(true, shouldExpand);
}
enableContainer(shouldExpand) {
this.setDisabled(false, shouldExpand);
}
}
export { ACLCollapsibleContainer };
No notes defined.