11 #Expander Expander
11.1 #Expander.default Collapsed
.sf-expander
Web Accessibility: If non-custom element is used, user must handle the change for aria-expanded="true/false" through javaScript.
Html
<div class="sf-expander">
<input class="sf-expander__checkbox" type="checkbox" id="some-id" aria-expanded="false">
<label class="sf-expander__header" for="some-id"><span class="sf-expander__icon sf-button -circle -icon"><i class="sf-button__icon sf-icon -size-l sf-fa sf-fa-angle-down"></i></span>Exapnded</label>
<label class="sf-expander__header" for="some-id"><span class="sf-expander__icon sf-button -circle -icon"><i class="sf-button__icon sf-icon -size-l sf-fa sf-fa-angle-right"></i></span>Collapsed</label>
<div class="sf-expander__content">
<h4>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit. Curabitur sem nulla, porttitor sit amet pretium luctus.Lorem ipsum dolor sit amet, consectetur adipiscing elit. In a tristique elit.
</h4>
<div class="sf-input">
<label class="sf-input__label" for="input_1">
<span>Input title</span>
</label>
<input type="text" class="sf-input__field" id="input_1" />
<p class="sf-input__required">Field is required</p>
<p class="hint sf-input__hint">Example: Input example text</p>
</div>
</div>
</div>