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

{#

** PARAMETERS WHEN INCLUDE OR EMBED
@param {string} heading
@param {string} content
@param {string} target (optionnal) - loop.index is default
@param {string} targetPrefix (optionnal) - If you use accordions inside matrix field, add the block index as targetPrefix

** EMBED BLOCKS
@block {block accordionsHeading} - use with embed to override the title block
@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: "hello", heading: "test", target: "1" },
      { content: "title", heading: "pouet", target: "2" }
   ] 
%}

{% if contentArray|length %}

   {% set targetPrefix = targetPrefix|default("") %}

   <div class="accordions-group-wrapper">
      {% for item in contentArray %}

         {% set target = target|default(loop.index) %}

         <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-{{ item.target }}"
                  aria-expanded="false" 
                  aria-controls="ac-{{ item.target }}"
                  >
                  {%- block accordionsHeading %}{# block accordionsHeading - override with embed if needed #}
                     {% if item.heading %}{{ item.heading }}{% endif %}
                  {% endblock -%}
               </button>
            </h3>
            <div id="ac-{{ item.target }}" class="h-0 overflow-hidden transition-height duration-300">{# do not style this div #}
               <div class="py-4">
                  {%- block accordionsContent %}{# block accordionsContent - override with embed if needed #}
                     {% if item.content %}
                        <div>{{ item.content }}</div>
                     {% endif %}
                  {% endblock -%}
               </div>
            </div>
         </div>
      
      {% endfor %}
   </div>
{% endif %}

Options