{"id":361,"date":"2024-06-20T17:04:38","date_gmt":"2024-06-20T15:04:38","guid":{"rendered":"https:\/\/wp-dsfr.fr\/demo\/?page_id=361"},"modified":"2024-09-23T16:07:49","modified_gmt":"2024-09-23T14:07:49","slug":"accordeon","status":"publish","type":"page","link":"https:\/\/wp-dsfr.fr\/demo\/liste-des-blocs-wordpress-du-dsfr\/accordeon\/","title":{"rendered":"Accord\u00e9on &amp; FAQ"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\">Accord\u00e9on &amp; FAQ<\/h1>\n\n\n\n<h2 class=\"wp-block-heading is-style-default\">Exemple d&rsquo;accord\u00e9on<\/h2>\n\n\n\n<p class=\"has-xl-font-size\">Les accord\u00e9ons permettent aux utilisateurs d&rsquo;afficher et de masquer des sections de contenu dans une page. Ces sections peuvent contenir de nombreux autres blocs tel que les titres, les paragraphes, les m\u00e9dias, les listes&#8230;<\/p>\n\n\n\n<div class=\"fr-accordions-group\">\n<div class=\"fr-accordion\">\n<h3 class=\"fr-accordion__title\"><button aria-expanded=\"false\" class=\"fr-accordion__btn\" aria-controls=\"fr-collapse-5ch5t\">Exemple d&rsquo;accord\u00e9on<\/button><\/h3>\n\n\n\n<div role=\"region\" class=\"fr-collapse\" id=\"fr-collapse-5ch5t\"><div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n\n\n\n<p>\/<\/p>\n\n\n\n<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"fr-accordion\">\n<h3 class=\"fr-accordion__title\"><button aria-expanded=\"false\" class=\"fr-accordion__btn\" aria-controls=\"fr-collapse-r86f\">Exemple d&rsquo;accord\u00e9on avec des images<\/button><\/h3>\n\n\n\n<div role=\"region\" class=\"fr-collapse\" id=\"fr-collapse-r86f\"><div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.<\/p>\n\n\n\n<figure class=\"wp-block-gallery has-nested-images columns-3 is-cropped wp-block-gallery-1 is-layout-flex wp-block-gallery-is-layout-flex\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"320\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/map-pin-2.png\" alt=\"\" class=\"wp-image-300\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/map-pin-2.png 320w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/map-pin-2-300x300.png 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/map-pin-2-150x150.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"320\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/compass-2.png\" alt=\"\" class=\"wp-image-299\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/compass-2.png 320w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/compass-2-300x300.png 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/compass-2-150x150.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"320\" height=\"320\" src=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/innovation-2.png\" alt=\"\" class=\"wp-image-292\" srcset=\"https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/innovation-2.png 320w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/innovation-2-300x300.png 300w, https:\/\/wp-dsfr.fr\/demo\/wp-content\/uploads\/sites\/2\/2024\/06\/innovation-2-150x150.png 150w\" sizes=\"auto, (max-width: 320px) 100vw, 320px\" \/><\/figure>\n<\/figure>\n\n\n\n<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p>\n<\/div><\/div>\n<\/div>\n\n\n\n<div class=\"fr-accordion\">\n<h3 class=\"fr-accordion__title\"><button aria-expanded=\"false\" class=\"fr-accordion__btn\" aria-controls=\"fr-collapse-4c5g6\">Exemple d&rsquo;accord\u00e9on avec des listes \u00e0 puces<\/button><\/h3>\n\n\n\n<div role=\"region\" class=\"fr-collapse\" id=\"fr-collapse-4c5g6\"><div>\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>list item<\/li>\n\n\n\n<li>list item<\/li>\n\n\n\n<li>list item\n<ul class=\"wp-block-list\">\n<li>list item niveau 2<\/li>\n\n\n\n<li>list item niveau 2<\/li>\n\n\n\n<li>list item niveau 2<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/div><\/div>\n<\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\">Exemple de FAQ<\/h2>\n\n\n\n<p class=\"has-xl-font-size\">Contrairement aux accord\u00e9ons, les sections de FAQ ne peuvent contenir que du texte pour r\u00e9pondre aux exigences des moteurs de recherche concernant les questions fr\u00e9quentes.<\/p>\n\n\n\n<div class=\"fr-accordions-group\"><div class=\"fr-accordion\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><h3 class=\"fr-accordion__title\"><button class=\"fr-accordion__btn\" aria-expanded=\"false\" aria-controls=\"fr-collapse-bcgl0\" itemprop=\"name\">Exemple de question<\/button><\/h3><div class=\"fr-collapse\" role=\"region\" id=\"fr-collapse-bcgl0\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div><p itemprop=\"text\">Exemple de r\u00e9ponse. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p><\/div><\/div><\/div><div class=\"fr-accordion\" itemprop=\"mainEntity\" itemtype=\"https:\/\/schema.org\/Question\"><h3 class=\"fr-accordion__title\"><button class=\"fr-accordion__btn\" aria-expanded=\"false\" aria-controls=\"fr-collapse-3uijh\" itemprop=\"name\">Exemple de question<\/button><\/h3><div class=\"fr-collapse\" role=\"region\" id=\"fr-collapse-3uijh\" itemscope itemprop=\"acceptedAnswer\" itemtype=\"https:\/\/schema.org\/Answer\"><div><p itemprop=\"text\">Exemple de r\u00e9ponse. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.<\/p><\/div><\/div><\/div><\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--80)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Accord\u00e9on &amp; FAQ Exemple d&rsquo;accord\u00e9on Les accord\u00e9ons permettent aux utilisateurs d&rsquo;afficher et de masquer des sections de contenu dans une page. Ces sections peuvent contenir de nombreux autres blocs tel que les titres, les paragraphes, les m\u00e9dias, les listes&#8230; Exemple de FAQ Contrairement aux accord\u00e9ons, les sections de FAQ ne peuvent contenir que du texte [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":30,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"templates\/empty-page.php","meta":{"footnotes":""},"class_list":["post-361","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/361","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/comments?post=361"}],"version-history":[{"count":6,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/361\/revisions"}],"predecessor-version":[{"id":544,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/361\/revisions\/544"}],"up":[{"embeddable":true,"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/pages\/30"}],"wp:attachment":[{"href":"https:\/\/wp-dsfr.fr\/demo\/wp-json\/wp\/v2\/media?parent=361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}