{"id":124655,"date":"2022-11-16T17:27:03","date_gmt":"2022-11-16T16:27:03","guid":{"rendered":"https:\/\/www.justinmind.com\/blog\/how-to-create-an-accordion\/"},"modified":"2025-02-03T16:44:41","modified_gmt":"2025-02-03T15:44:41","slug":"how-to-create-an-accordion","status":"publish","type":"post","link":"https:\/\/www.justinmind.com\/fr\/aide\/how-to-design-an-accordion","title":{"rendered":"Comment concevoir un accord\u00e9on"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Dans cet article, vous apprendrez \u00e0 cr\u00e9er un accord\u00e9on.<\/span><\/p>\n<p><iframe loading=\"lazy\" src=\"https:\/\/www.justinmind.com\/usernote\/tests\/23518471\/73112233\/73154072\/index.html\" width=\"820px\" height=\"635px\" frameborder=\"0\"><\/iframe><\/p>\n<p><span style=\"font-weight: 400;\">Voici comment le construire :<\/span><\/p>\n<h3><strong>Voir<\/strong><\/h3>\n<ul>\n<li>S\u00e9lectionnez \u00ab\u00a0Panneau dynamique\u00a0\u00bb dans la section Contenu dynamique et placez-le sur le canevas. Ensuite, allez dans la palette Propri\u00e9t\u00e9s et r\u00e9glez la disposition du panneau sur \u00ab\u00a0Vertical\u00a0\u00bb.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-1.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<li>Placez un deuxi\u00e8me \u00ab\u00a0panneau dynamique\u00a0\u00bb sur le canevas ; ensuite, s\u00e9lectionnez un \u00ab\u00a0rectangle\u00a0\u00bb et, en maintenant la touche Commande (Mac) ou Contr\u00f4le (Widnows) enfonc\u00e9e, placez-le \u00e0 l&rsquo;int\u00e9rieur du nouveau panneau ; redimensionnez et fa\u00e7onnez votre rectangle pour simuler un en-t\u00eate et placez une fl\u00e8che dans le c\u00f4t\u00e9 gauche.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-2.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<li>A l&rsquo;int\u00e9rieur de votre panneau, sous l&rsquo;en-t\u00eate, vous pouvez d\u00e9finir les informations\/images\/\u00e9l\u00e9ments que vous souhaitez afficher ; ensuite, cliquez sur le panneau, et les r\u00e8gles de redimensionnement s&rsquo;afficheront, poussez le bouton vers le haut jusqu&rsquo;\u00e0 ce que vous couvriez les informations et que le panneau n&rsquo;affiche plus que l&rsquo;en-t\u00eate.<video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-3.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-3.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-3.png\" alt=\"Cr\u00e9er un accord\u00e9on 3\">Cr\u00e9er un accord\u00e9on 3<\/source><\/video><\/li>\n<li>Maintenez la touche Commande (Mac) ou Contr\u00f4le (Windows) enfonc\u00e9e et faites glisser le deuxi\u00e8me panneau dans le premier. Vous verrez une teinte bleue lorsque vous ferez glisser l&rsquo;\u00e9l\u00e9ment \u00e0 l&rsquo;int\u00e9rieur ; cela simulera un \u00e9l\u00e9ment dans votre accord\u00e9on. <video class=\"lazyload\" style=\"max-width: 820px; width: 100%; padding: 20px 0px;\" preload=\"auto\" loop=\"loop\" muted=\"\" width=\"100%\" height=\"100%\" data-autoplay=\"\" data-poster=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-4.png\"><source src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-4.mp4\" type=\"video\/mp4\"><img decoding=\"async\" src=\"https:\/\/assets.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-4.png\" alt=\"Cr\u00e9er un accord\u00e9on 4\">Cr\u00e9er un accord\u00e9on 4<\/source><\/video><\/li>\n<li>R\u00e9p\u00e9tez l&rsquo;op\u00e9ration pour cr\u00e9er d&rsquo;autres options et placez-les les unes \u00e0 c\u00f4t\u00e9 des autres \u00e0 l&rsquo;int\u00e9rieur du premier panneau.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-5.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<\/ul>\n<h3><strong>Ev\u00e9nements<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">S\u00e9lectionnez le premier \u00ab\u00a0Rectangle\u00a0\u00bb, allez dans la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Ajouter un \u00e9v\u00e9nement\u00a0\u00bb.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Toggle\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Redimensionner l&rsquo;\u00e9l\u00e9ment\u00a0\u00bb et assurez-vous que le panneau contenant votre premier \u00e9l\u00e9ment est s\u00e9lectionn\u00e9.<\/span><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-6.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<\/ol>\n<p><span data-preserver-spaces=\"true\">Pour la valeur, s\u00e9lectionnez \u00ab\u00a0Fixe\u00a0\u00bb et ajustez la valeur pour la hauteur uniquement ; ici, vous devrez redimensionner en augmentant le nombre pour afficher toutes les informations que vous avez dans votre panneau.  <\/span><span data-preserver-spaces=\"true\">Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de l&rsquo;\u00e9v\u00e9nement.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Allez dans la palette \u00c9v\u00e9nements et cliquez sur le \u00ab\u00a0+\u00a0\u00bb pour ajouter un nouvel \u00e9v\u00e9nement.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">Dans la bo\u00eete de dialogue, cliquez sur \u00ab\u00a0Choose Trigger\u00a0\u00bb, survolez la section \u00ab\u00a0Mouse\u00a0\u00bb et s\u00e9lectionnez \u00ab\u00a0on Toggle\u00a0\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">Dans \u00ab\u00a0Choisir une action\u00a0\u00bb, s\u00e9lectionnez \u00ab\u00a0Faire pivoter l&rsquo;\u00e9l\u00e9ment\u00a0\u00bb et s\u00e9lectionnez la fl\u00e8che.  <\/span><\/li>\n<li>Pour la valeur, s\u00e9lectionnez la valeur \u00ab\u00a0Fixe\u00a0\u00bb 180\u00b0. Cliquez sur \u00ab\u00a0Ok\u00a0\u00bb pour terminer la cr\u00e9ation de votre \u00e9v\u00e9nement.<img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-70603\" src=\"https:\/\/www.justinmind.com\/wp-content\/uploads\/2022\/10\/create-an-accordion-7.png\" alt=\"acc 1\" width=\"1215\" height=\"753\"><\/li>\n<\/ol>\n<p>Le \u00ab\u00a0rectangle\u00a0\u00bb \u00e9tant s\u00e9lectionn\u00e9, acc\u00e9dez \u00e0 la palette \u00c9v\u00e9nements et cliquez sur \u00ab\u00a0Copier tous les \u00e9v\u00e9nements\u00a0\u00bb.<br \/>\nS\u00e9lectionnez le rectangle suivant (option 2) et collez tous les \u00e9v\u00e9nements ; modifiez les \u00e9v\u00e9nements pour rediriger la cible et ajustez la taille et la rotation.<br \/>\nR\u00e9p\u00e9tez l&rsquo;op\u00e9ration avec les \u00ab\u00a0options\u00a0\u00bb restantes.<\/p>\n<div class=\"embed-container\" style=\"padding-bottom: 57%;\"><iframe loading=\"lazy\" src=\"https:\/\/player.vimeo.com\/video\/762571040\" width=\"640\" height=\"564\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/div>\n<p><span data-preserver-spaces=\"true\">Simulez votre prototype.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Dans cet article, vous apprendrez \u00e0 cr\u00e9er un accord\u00e9on. Voici comment le construire : Voir S\u00e9lectionnez \u00ab\u00a0Panneau dynamique\u00a0\u00bb dans la section Contenu dynamique et placez-le sur&#8230;<\/p>\n","protected":false},"author":20,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[8433,8426],"tags":[],"class_list":["post-124655","post","type-post","status-publish","format-standard","hentry","category-composants-avances","category-comment-faire"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124655"}],"collection":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/comments?post=124655"}],"version-history":[{"count":1,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124655\/revisions"}],"predecessor-version":[{"id":126182,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/posts\/124655\/revisions\/126182"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/media?parent=124655"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/categories?post=124655"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/fr\/wp-json\/wp\/v2\/tags?post=124655"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}