11 #Expander Expander

Toggle full screen Open in new window Toggle example guides Toggle HTML markup

Collapsed

.sf-expander

 Web Accessibility: If non-custom element is used, user must handle the change for aria-expanded="true/false" through javaScript.

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.

Field is required

Example: Input example text

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:&nbsp;Input example text</p>
         </div>
        </div>
    </div>