Framework Component Library

Disclosure 

<!-- Default -->
<div class="fw-container">
    <!-- Disclosure -->
    <div class="disclosure" data-js-disclosure>

        <button class="button-bordered
 				" data-js-disclosure-button="" aria-controls="disclosure-1__panel">
            <span class="button-bordered__inner"> <span class="button-bordered__label">Toggle Details</span>
            </span>
        </button>
        <div class="disclosure__panel" data-js-disclosure-panel id="disclosure-1__panel" hidden>
            <p>This is the disclosed content. It can contain any markup.</p>
        </div>
    </div>
    <!-- END: Disclosure -->
</div>


<!-- Starts Open -->
<div class="fw-container">
    <!-- Disclosure -->
    <div class="disclosure" data-js-disclosure>

        <button class="button-bordered
 				state-active" data-js-disclosure-button="" aria-controls="disclosure-7__panel">
            <span class="button-bordered__inner"> <span class="button-bordered__label">Already Open</span>
            </span>
        </button>
        <div class="disclosure__panel" data-js-disclosure-panel id="disclosure-7__panel" hidden>
            <p>This is the disclosed content. It can contain any markup.</p>
        </div>
    </div>
    <!-- END: Disclosure -->
</div>


<!-- Persistent (No Auto-Close) -->
<div class="fw-container">
    <!-- Disclosure -->
    <div class="disclosure" data-js-disclosure='{"closeOnEscape":false,"closeOnBlur":false,"closeOnOutsideClick":false}'>

        <button class="button-bordered
 				" data-js-disclosure-button="" aria-controls="disclosure-8__panel">
            <span class="button-bordered__inner"> <span class="button-bordered__label">Persistent Toggle</span>
            </span>
        </button>
        <div class="disclosure__panel" data-js-disclosure-panel id="disclosure-8__panel" hidden>
            <p>Only closes via the trigger button.</p>
        </div>
    </div>
    <!-- END: Disclosure -->
</div>


<!-- Hover (CSS Enhancement) -->
<div class="fw-container">
    <!-- Disclosure -->
    <div class="disclosure disclosure--hover" data-js-disclosure>

        <button class="button-bordered
 				" data-js-disclosure-button="" aria-controls="disclosure-9__panel">
            <span class="button-bordered__inner"> <span class="button-bordered__label">Hover or Click</span>
            </span>
        </button>
        <div class="disclosure__panel" data-js-disclosure-panel id="disclosure-9__panel" hidden>
            <p>Visible on hover for pointer users. Click to toggle for everyone.</p>
        </div>
    </div>
    <!-- END: Disclosure -->
</div>


<!-- With Deep Link -->
<div class="fw-container">
    <!-- Disclosure -->
    <div class="disclosure" data-js-disclosure='{"deeplink":true}'>

        <button class="button-bordered
 				" data-js-disclosure-button="" aria-controls="demo-deeplink__panel">
            <span class="button-bordered__inner"> <span class="button-bordered__label">Deep Linked</span>
            </span>
        </button>
        <div class="disclosure__panel" data-js-disclosure-panel id="demo-deeplink__panel" hidden>
            <p>This is the disclosed content. It can contain any markup.</p>
        </div>
    </div>
    <!-- END: Disclosure -->
</div>


{% set id = id|default(uniqid('disclosure')) %}

<div class="fw-container">
	<!-- Disclosure -->
	<div
		class="disclosure{% if modifier %} disclosure--{{ modifier }}{% endif %}"
		data-js-disclosure{% if settings is not empty %}='{{ settings|json_encode }}'{% endif %}
	>
		{% include '@partial-button' with {
			classes: {
				base: 'button-bordered',
				utility: open ? 'state-active' : ''
			},
			attributes: {
				'data-js-disclosure-button': '',
				'aria-controls': id ~ '__panel',
			},
			title: title|default('Toggle')
		} only %}
		<div
			class="disclosure__panel"
			data-js-disclosure-panel
			id="{{ id ~ '__panel' }}"
			hidden
		>
			{{ content|default('')|raw }}
		</div>
	</div>
	<!-- END: Disclosure -->
</div>

No notes defined.