Framework Component Library

Disclosure: 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-5__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-5__panel" hidden>
            <p>Visible on hover for pointer users. Click to toggle for everyone.</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.