Skip to main content

Accordéons

Height sur auto lors de l'ouverture afin de permettre le resize ou l'ajout de contenu dynamiquement.

Demo

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