Height
sur auto
lors de l'ouverture afin de permettre le resize ou l'ajout de contenu dynamiquement.
Demo
Oh yeah!
Hum, not really.
Installation
Importez dans votre projet
import { Accordions } from "@overdog/fn"
Créez et initialisez une instance
new Accordions(".accordions-group-wrapper", {
// your options here - see options below
}).init()
Ajoutez les variants Tailwind dans la section plugins de votre fichier de config
Note : si vous utilisez plusieurs éléments de Overdog FN qui nécessitent les mêmes variants, vous les ajoutez seulement une fois.
module.exports = {
// ...
plugins: [
plugin(function ({ addVariant }) {
addVariant("is-open", "&[data-fn-is-open]")
addVariant("parent-is-open", "[data-fn-is-open] &")
})
]
}
Hint : si tous les blocs d'accordéons de votre site ont les mêmes options, vous créez une seule instance.
Twig template Code
{#
EMBED BLOCKS
{% block accordionsHeading %} - use with embed to override the title block
{% block accordionsContent %} - use with embed to override the content block
#}
{# You probably want to change this array for a Craft CMS query #}
{% set contentArray = [
{ content: "Oh yeah!", title: "Hello, this is an accordion" },
{ content: "Hum, not really.", title: "Wait, are you sure?" }
]
%}
{#
Example targetPrefix
You can set a value as a prefix for targetPrefix outside your for loop
Useful in matrix blocks
#}
{% set targetPrefix = "demo-" %}
{% if contentArray|length %}
<div class="accordions-group-wrapper">{# your wrapper classes - used when you create your JS instance #}
{% for item in contentArray %}
{# edit the target to fit your needs #}
{% set target = targetPrefix is defined ? targetPrefix ~ loop.index : loop.index %}
{# content #}
<div class="mb-4" data-fn-accordion>
<h3>
<button
class="bg-white border border-slate-300 block p-4 text-left w-full parent-is-open:bg-gray-300"
data-fn-target="ac-{{ target }}"
aria-expanded="false"
aria-controls="ac-{{ target }}"
>
{%- block accordionsHeading %}{# override with embed if needed #}
{% if item.title %}{{ item.title }}{% endif %}
{% endblock -%}
</button>
</h3>
<div id="ac-{{ target }}" class="h-0 overflow-hidden transition-height duration-300">{# do not style this div #}
<div class="py-4">
{%- block accordionsContent %}{# override with embed if needed #}
{% if item.content %}
<div>{{ item.content }}</div>
{% endif %}
{% endblock -%}
</div>
</div>
</div>
{% endfor %}
</div>
{% endif %}
Options
-
NameTypeDefaultDescription
-
alternateModeBooleanfalseFerme les accordéons ouverts lorsqu'on clique sur un nouveau
-
closeClickingOutsideBooleanfalseFerme les accordéons lorsqu'on clique ailleurs dans la page