seeds_ui-1.0.x-dev/components/seeds_ui_accordion/seeds_ui_accordion.twig

<div  class="accordion" style="border-radius:{{radius}}px">
<div class="accordion-item" x-data="{ expanded: false }" :class="{ 'active': expanded }">
	{% if title %}
		<div @click="expanded = ! expanded" class="accordion-header">
			<div class="accordion-title grow">{{ title }}</div>
			<div class="accordion-icon">
				{% if icon_style == 'plus' %}
					<svg class="accordion-plus-icon" width="24" height="24" viewbox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
						<g id="Plus">
							<rect id="Rectangle 412" x="10" y="3" width="2" height="16" rx="1" fill="{{ icon_color|default('#000000') }}"/>
							<rect id="Rectangle 413" x="3" y="12" width="2" height="16" rx="1" transform="rotate(-90 3 12)" fill="{{ icon_color|default('#000000') }}"/>
						</g>
					</svg>
				{% elseif icon_style == 'arrow' %}
					<svg class="accordion-arrow-icon" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<g id="arrow-down">
							<path id="Vector" fill-rule="evenodd" clip-rule="evenodd" d="M3.46967 7.46967C3.76256 7.17678 4.23744 7.17678 4.53033 7.46967L12 14.9393L19.4697 7.46967C19.7626 7.17678 20.2374 7.17678 20.5303 7.46967C20.8232 7.76256 20.8232 8.23744 20.5303 8.53033L12.5303 16.5303C12.2374 16.8232 11.7626 16.8232 11.4697 16.5303L3.46967 8.53033C3.17678 8.23744 3.17678 7.76256 3.46967 7.46967Z" fill="{{ icon_color|default('#000000') }}"/>
						</g>
					</svg>
				{% else %}
					{# Default chevron icon when no icon_style is specified #}
					<svg class="accordion-chevron-icon" width="24" height="24" viewbox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
						<path d="M6 9L12 15L18 9" stroke="{{ icon_color|default('#000000') }}" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
					</svg>
				{% endif %}
			</div>
		</div>
	{% endif %}
	{% if content %}
		<div x-show="expanded" x-collapse>
			<div class="accordion-content">
				{{ content }}
			</div>
		</div>
		{% endif %}
	</div>
</div>