{"id":1734,"date":"2024-06-23T12:35:38","date_gmt":"2024-06-23T10:35:38","guid":{"rendered":"https:\/\/wypo.io\/documentations\/gutenberg-accordions\/"},"modified":"2024-09-12T01:24:43","modified_gmt":"2024-09-11T23:24:43","slug":"gutenberg-accordions","status":"publish","type":"wypo_documentations","link":"https:\/\/wypo.io\/en\/documentations\/gutenberg-accordions\/","title":{"rendered":"Gutenberg Accordions"},"content":{"rendered":"            <div class=\"hf_animated fade_bottom none default wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<h2 class=\"wp-block-heading   \" datalink=\"content-prerequis\">Requirements<\/h2>\n\n\n\n<ul class=\"is-style-important wp-block-list\">\n<li class=\"\"><strong>WordPress<\/strong> : Version 5.9 or higher<\/li>\n\n\n\n<li class=\"\"><strong>PHP<\/strong> : Version 7.0 or higher<\/li>\n<\/ul>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"is-style-normal wp-block-habefast-advanced-layout-group is-layout-constrained wp-block-habefast-advanced-layout-group-is-layout-constrained\">\r\n                <div class=\"wp-block-habefast-advanced-group-container is-style- is-layout-constrained\"  style='--_hfal-cg-d-lg:flex;--_hfal-cg-p-t-lg:var(--wp--preset--spacing--20);--_hfal-cg-d-md:flex;--_hfal-cg-d-sm:flex;--_hfal-cg-p-t-md:var(--wp--preset--spacing--20);--_hfal-cg-p-t-sm:var(--wp--preset--spacing--20);'>\r\n                                        <div class=\"wp-block-habefast-advanced-group-inner is-layout-flow\">\r\n                        \n\n<div class=\"wp-block-group   hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-installation\">Installation<\/h2>\n\n\n\n<p class=\"\">To install the plugin, please refer to the &#8220;<a href=\"https:\/\/wypo.io\/en\/complete-guide-installing-wordpress-plugin\/\">Installing a plugin<\/a>&#8221; documentation.  <\/p>\n<\/div>\n\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            \n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-exemple\">Exemple<\/h2>\n\n\n<div class=\"wp-block-hf-accordion \" data-classNameOnOpen=\"\" data-openChild=\"0\" data-onOpenCloseOther=\"0\" data-scrollToOpenedItem=\"0\">            <div class=\"wp-block-hf-accordion-item active \">\r\n                <button class=\"wp-block-hf-accordion-item-title\" aria-controls=\"panel-b238e733-7c44-4f03-bbf1-f56d8786ae13-0\"\r\n                    aria-expanded=\"true\">\r\n                    Exemple 1 &#8211; Titre 1                <\/button >\r\n                <div class=\"wp-block-hf-accordion-item-content\" id=\"panel-b238e733-7c44-4f03-bbf1-f56d8786ae13-0\">\r\n                    <div class=\"wp-block-hf-accordion-item-content-layout is-layout-flow \">\r\n                        \n<p class=\"\">Contenu.<\/p>\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"wp-block-hf-accordion-item \">\r\n                <button class=\"wp-block-hf-accordion-item-title\" aria-controls=\"panel-b238e733-7c44-4f03-bbf1-f56d8786ae13-1\"\r\n                    aria-expanded=\"false\">\r\n                    Exemple 1 &#8211; Titre 2                <\/button >\r\n                <div class=\"wp-block-hf-accordion-item-content\" id=\"panel-b238e733-7c44-4f03-bbf1-f56d8786ae13-1\">\r\n                    <div class=\"wp-block-hf-accordion-item-content-layout is-layout-flow \">\r\n                        \n<p class=\"\">Contenu.<\/p>\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <\/div>\n\n      <div style=\"--_hfal-s-h-lg:var(--wp--preset--spacing--30);\" class=\"wp-block-habefast-spacer\"><\/div>\r\n      \n\n<div class=\"wp-block-hf-accordion \" data-classNameOnOpen=\"\" data-openChild=\"1\" data-onOpenCloseOther=\"0\" data-scrollToOpenedItem=\"0\">            <div class=\"wp-block-hf-accordion-item \">\r\n                <button class=\"wp-block-hf-accordion-item-title\" aria-controls=\"panel-8c53a7b9-6384-4f95-8d24-7177b5d6ff16-0\"\r\n                    aria-expanded=\"false\">\r\n                    Exemple 2 &#8211; Titre 1                <\/button >\r\n                <div class=\"wp-block-hf-accordion-item-content\" id=\"panel-8c53a7b9-6384-4f95-8d24-7177b5d6ff16-0\">\r\n                    <div class=\"wp-block-hf-accordion-item-content-layout is-layout-flow \">\r\n                        \n<p class=\"\">Contenu.<\/p>\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"wp-block-hf-accordion-item active \">\r\n                <button class=\"wp-block-hf-accordion-item-title\" aria-controls=\"panel-8c53a7b9-6384-4f95-8d24-7177b5d6ff16-1\"\r\n                    aria-expanded=\"true\">\r\n                    Exemple 2 &#8211; Titre 2                <\/button >\r\n                <div class=\"wp-block-hf-accordion-item-content\" id=\"panel-8c53a7b9-6384-4f95-8d24-7177b5d6ff16-1\">\r\n                    <div class=\"wp-block-hf-accordion-item-content-layout is-layout-flow \">\r\n                        \n<p class=\"\">Contenu.<\/p>\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <\/div>\n\n      <div style=\"--_hfal-s-h-lg:var(--wp--preset--spacing--30);\" class=\"wp-block-habefast-spacer\"><\/div>\r\n      \n\n<div class=\"wp-block-hf-accordion \" data-classNameOnOpen=\"\" data-openChild=\"\" data-onOpenCloseOther=\"1\" data-scrollToOpenedItem=\"1\">            <div class=\"wp-block-hf-accordion-item \">\r\n                <button class=\"wp-block-hf-accordion-item-title\" aria-controls=\"panel-f5fa4671-3b34-4af1-8d9b-02ef18a2498a-0\"\r\n                    aria-expanded=\"false\">\r\n                    Exemple 3 &#8211; Titre 1                <\/button >\r\n                <div class=\"wp-block-hf-accordion-item-content\" id=\"panel-f5fa4671-3b34-4af1-8d9b-02ef18a2498a-0\">\r\n                    <div class=\"wp-block-hf-accordion-item-content-layout is-layout-flow \">\r\n                        \n<p class=\"\">Contenu.<\/p>\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n                        <div class=\"wp-block-hf-accordion-item \">\r\n                <button class=\"wp-block-hf-accordion-item-title\" aria-controls=\"panel-f5fa4671-3b34-4af1-8d9b-02ef18a2498a-1\"\r\n                    aria-expanded=\"false\">\r\n                    Exemple 3 &#8211; Titre 2                <\/button >\r\n                <div class=\"wp-block-hf-accordion-item-content\" id=\"panel-f5fa4671-3b34-4af1-8d9b-02ef18a2498a-1\">\r\n                    <div class=\"wp-block-hf-accordion-item-content-layout is-layout-flow \">\r\n                        \n<p class=\"\">Contenu.<\/p>\n                    <\/div>\r\n                <\/div>\r\n            <\/div>\r\n            <\/div><\/div>\n\n<div class=\"wp-block-group is-style-smallbordertop  hf_animated fade_bottom default is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading   \" datalink=\"content-parametres-du-bloc\">Param\u00e8tres du bloc<\/h2>\n\n\n\n<p class=\"\">Ce bloc contiendra plusieurs onglets d\u00e9pliants avec un titre et le contenu souhaite.<\/p>\n\n\n\n<p class=\"\">Diff\u00e9rents param\u00e8tres de bloc sont disponibles:<\/p>\n\n\n            <div class=\"wp-block-habefast-advanced-layout\">\r\n                <div class=\"wp-block-habefast-advanced-layout-container\"  style='--_hfal-l-d-lg:block;--_hfal-l-p-b-lg:var(--wp--preset--spacing--50);--_hfal-l-d-md:block;--_hfal-l-d-sm:block;--_hfal-l-p-b-md:var(--wp--preset--spacing--50);--_hfal-l-p-b-sm:var(--wp--preset--spacing--50);'>\r\n                    \n            <div style=\"--_hfal-cs-w-lg:nowrap;--_hfal-cs-va-lg:center;--_hfal-cs-g-h-lg:var(--wp--preset--spacing--30);--_hfal-cs-g-v-lg:var(--wp--preset--spacing--30);--_hfal-cs-w-md:nowrap;--_hfal-cs-w-sm:nowrap;--_hfal-cs-va-md:center;--_hfal-cs-va-sm:center;--_hfal-cs-g-h-md:var(--wp--preset--spacing--30);--_hfal-cs-g-h-sm:var(--wp--preset--spacing--30);--_hfal-cs-g-v-md:var(--wp--preset--spacing--30);--_hfal-cs-g-v-sm:var(--wp--preset--spacing--30);\" class=\"wp-block-habefast-advanced-layout-columns\">\r\n                \n            <div style=\"--_hfal-c-d-lg:block;--_hfal-c-w-lg:66.6666666666%;--_hfal-c-w-sm:100%;--_hfal-c-d-md:block;--_hfal-c-d-sm:block;--_hfal-c-w-md:66.6666666666%;\" class=\"is-layout-flow wp-block-habefast-advanced-layout-column\">\r\n                \n\n<ul class=\"c-list wp-block-list\">\n<li class=\"\">Ouvrir un onglet par d\u00e9faut (bool\u00e9en)<\/li>\n\n\n\n<li class=\"\">Accord\u00e9on ouvert par d\u00e9faut, pour choisir quel onglet ouvrir au chargement de la page<\/li>\n\n\n\n<li class=\"\">Fermer les onglets \u00e0 l&#8217;ouverture d&#8217;un onglet<\/li>\n\n\n\n<li class=\"\">Choix de la balise des titres, par d\u00e9faut: div<\/li>\n\n\n\n<li class=\"\">Classe additionnelle \u00e0 ajouter au contenu des onglets (cach\u00e9 dans la section &#8220;Avanc\u00e9&#8221;)<\/li>\n\n\n\n<li class=\"\">Classe \u00e0 ajouter a l\u2019ouverture d&#8217;un onglet, peut \u00eatre utilise pour d\u00e9clencher une animation par exemple (cach\u00e9 dans la section &#8220;Avanc\u00e9&#8221;)<\/li>\n<\/ul>\n\n            <\/div>\r\n            \n\n            <div style=\"--_hfal-c-d-lg:block;--_hfal-c-w-lg:33.3333333333%;--_hfal-c-w-sm:100%;--_hfal-c-d-md:block;--_hfal-c-d-sm:block;--_hfal-c-w-md:33.3333333333%;\" class=\"is-layout-flow wp-block-habefast-advanced-layout-column\">\r\n                \n\n<figure class=\"wp-block-image size-full is-style-shadow   \"><img loading=\"lazy\" decoding=\"async\" width=\"272\" height=\"268\" src=\"https:\/\/wypo.io\/wp-content\/uploads\/2023\/09\/wypo-documentation-gutenberg-accordions-block-settings.png\" alt=\"Wypo Documentation Gutenberg Accordions Block Settings\" class=\"wp-image-389\"\/><\/figure>\n\n            <\/div>\r\n            \n            <\/div>\r\n            \n                <\/div>\r\n            <\/div>\r\n            <\/div>\n","protected":false},"featured_media":0,"parent":0,"menu_order":49,"template":"","meta":{"_habefastfse_class":"","hf_wpseo_meta_title":"Gutenberg Accordions plugin documentation [separator] [sitetitle]","hf_wpseo_meta_description":"Discover the complete guide to using the accordion plugin for Gutenberg. Learn how to install, and use accordions for your Gutenberg pages to enhance the interactivity and visual appeal of your WordPress site.","hf_wpseo_meta_robots_index":"","hf_wpseo_meta_robots_follow":true,"hf_wpseo_meta_robots_advanced":"{}","hf_wpseo_meta_canonical_url":"","documentation_description":"This plugin adds an \"Accordion\" block to create an accordion system from the Gutenberg editor.","documentation_menu_text":"","documentation_related_pageid":1538,"wypo_hidden_role_wypo_users_not_logged":false,"wypo_visibility_role_wypo_users_not_logged":false,"wypo_hidden_role_administrator":false,"wypo_visibility_role_administrator":false,"wypo_hidden_role_habefast":false,"wypo_visibility_role_habefast":false,"wypo_hidden_role_customer":false,"wypo_visibility_role_customer":false,"wypo_hidden_role_habefast_manager":false,"wypo_visibility_role_habefast_manager":false,"wypo_hidden_for_role":false,"wypo_visibility_for_role":false},"class_list":["post-1734","wypo_documentations","type-wypo_documentations","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations\/1734","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/wypo_documentations"}],"about":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/types\/wypo_documentations"}],"wp:attachment":[{"href":"https:\/\/wypo.io\/en\/wp-json\/wp\/v2\/media?parent=1734"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}