{"id":124640,"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\/es\/soporte\/como-disenar-un-acordeon","title":{"rendered":"C\u00f3mo dise\u00f1ar un acorde\u00f3n"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">En este art\u00edculo aprender\u00e1s a crear un acorde\u00f3n.<\/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;\">As\u00ed es como se construye:<\/span><\/p>\n<h3><strong>Ver<\/strong><\/h3>\n<ul>\n<li>Selecciona \u00abPanel din\u00e1mico\u00bb en la secci\u00f3n de contenido din\u00e1mico y col\u00f3calo en el lienzo; a continuaci\u00f3n, ve a la paleta Propiedades y establece el dise\u00f1o del panel en \u00abVertical\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>Coloca un segundo \u00abPanel din\u00e1mico\u00bb en el lienzo; a continuaci\u00f3n, selecciona un \u00abRect\u00e1ngulo\u00bb y manteniendo pulsado comando (Mac) o control (Widnows) col\u00f3calo dentro del nuevo panel, cambia el tama\u00f1o y la forma de tu rect\u00e1ngulo para simular una cabecera y coloca una flecha en el lado izquierdo.<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>Dentro de tu panel, debajo de la cabecera, puedes establecer la informaci\u00f3n\/im\u00e1genes\/elementos que quieres mostrar; a continuaci\u00f3n, haz clic en el panel, y se mostrar\u00e1n las reglas redimensionables, empuja el bot\u00f3n hacia arriba hasta que cubras la informaci\u00f3n y el panel s\u00f3lo muestre la cabecera.<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=\"Crear un acorde\u00f3n 3\">Crear un acorde\u00f3n 3<\/source><\/video><\/li>\n<li>Mant\u00e9n pulsado Comando (Mac) o Control (Widnows) y arrastra el segundo panel dentro del primero. Ver\u00e1s un tinte azul cuando arrastres el elemento dentro; esto simular\u00e1 un elemento en tu acorde\u00f3n. <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=\"Crear un acorde\u00f3n 4\">Crear un acorde\u00f3n 4<\/source><\/video><\/li>\n<li>Repite las acciones para crear m\u00e1s opciones y col\u00f3calas una debajo de otra dentro del primer panel.<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>Eventos<\/strong><\/h3>\n<p><span data-preserver-spaces=\"true\">Selecciona el primer \u00abRect\u00e1ngulo\u00bb, ve a la paleta Eventos y haz clic en \u00abA\u00f1adir evento\u00bb.&nbsp;<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abActivar\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abRedimensionar elemento\u00bb y aseg\u00farate de que est\u00e1 seleccionado el panel que contiene tu primer elemento.<\/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\">Para el valor, selecciona \u00abFijo\u00bb y ajusta el valor s\u00f3lo para la altura; aqu\u00ed, tendr\u00e1s que redimensionar aumentando el n\u00famero para mostrar toda la informaci\u00f3n que tengas en tu panel.  <\/span><span data-preserver-spaces=\"true\">Haz clic en \u00abAceptar\u00bb para terminar de crear el evento.<\/span><\/p>\n<p><span data-preserver-spaces=\"true\">Ve a la paleta Eventos y haz clic en el signo \u00ab+\u00bb para a\u00f1adir un nuevo evento.<\/span><\/p>\n<ol>\n<li><span data-preserver-spaces=\"true\">En el cuadro de di\u00e1logo, haz clic en \u00abElegir activador\u00bb, pasa el rat\u00f3n por encima de la secci\u00f3n \u00abRat\u00f3n\u00bb y selecciona \u00abActivar\u00bb.<\/span><\/li>\n<li><span data-preserver-spaces=\"true\">En \u00abElegir acci\u00f3n\u00bb, selecciona \u00abGirar elemento\u00bb y selecciona la flecha.  <\/span><\/li>\n<li>Para el valor, selecciona el \u00abFijo\u00bb 180\u00b0. Haz clic en \u00abAceptar\u00bb para terminar de crear tu evento.<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>Con el \u00abRect\u00e1ngulo\u00bb seleccionado, ve a la paleta Eventos y haz clic en \u00abCopiar todos los eventos\u00bb.<br \/>\nSelecciona el siguiente rect\u00e1ngulo (Opci\u00f3n 2), y pega todos los eventos; edita los eventos para redirigir el objetivo y ajustar el tama\u00f1o y la rotaci\u00f3n.<br \/>\nRepite con el resto de \u00abOpciones\u00bb.<\/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\">Simula tu prototipo.<\/span><\/p>\n","protected":false},"excerpt":{"rendered":"<p>En este art\u00edculo aprender\u00e1s a crear un acorde\u00f3n. As\u00ed es como se construye: Ver Selecciona \u00abPanel din\u00e1mico\u00bb en la secci\u00f3n de contenido din\u00e1mico y col\u00f3calo en&#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":[8430,8424],"tags":[],"class_list":["post-124640","post","type-post","status-publish","format-standard","hentry","category-componentes-avanzados","category-trucos-avanzados"],"acf":[],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124640"}],"collection":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/users\/20"}],"replies":[{"embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/comments?post=124640"}],"version-history":[{"count":2,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124640\/revisions"}],"predecessor-version":[{"id":126180,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/posts\/124640\/revisions\/126180"}],"wp:attachment":[{"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/media?parent=124640"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/categories?post=124640"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.justinmind.com\/es\/wp-json\/wp\/v2\/tags?post=124640"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}