Soy un principiante en programación y estoy tratando de crear una sección de preguntas frecuentes para mi sitio de cartera.
Estoy usando el marco css de tailwind y no obtengo acordeón con javascript, ¿podría ayudarme?
Tengo la clase accordion__item cuando se hace clic en el elemento, quiero que muestre el contenido contenido en el elemento de párrafo de contenido de acordeón y, cuando se vuelve a hacer clic, cierra el contenido. ¿Me puedes ayudar?
let item = document.getElementsByClassName("accordion__item"); let i; for (i = 0; i < item.length; i++) { item[i].addEventListener("click", function() { this.classList.toggle("open"); }); } .open { display: block } <head> <script src="https://cdn.tailwindcss.com"></script> <script src="./modal.js"></script> </head> <body> <section class="bg-white dark:bg-gray-900"> <div class="container max-w-4xl px-6 py-10 mx-auto"> <h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1> <div class="mt-12 space-y-8"> <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700 accordion__item open"> <button class="flex items-center justify-between w-full p-8"> <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1> <span class="text-gray-400 bg-gray-200 rounded-full"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </button> <hr class="border-gray-200 dark:border-gray-700"> <p class="p-8 text-sm text-gray-500 dark:text-gray-300 accordion__content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus? </p> </div> </div> </div> </section> </body>El problema aquí es que está alternando display: block . Inicialmente, los elementos son en block o inline según su naturaleza. Lo siguiente es que lo está alternando en el contenedor que también contiene el botón de alternancia.
Para solucionarlo, debemos alternar la display: none , que en realidad oculta elementos y mover el objetivo de alternancia de clase del contenedor a su contenido.
let item = document.getElementsByClassName("accordion__item"); let i; for (i = 0; i < item.length; i++) { item[i].addEventListener("click", function() { this.querySelector('.accordion__content').classList.toggle("d-none"); }); } .open { display: block } .d-none { display: none } <head> <script src="https://cdn.tailwindcss.com"></script> <script src="./modal.js"></script> </head> <body> <section class="bg-white dark:bg-gray-900"> <div class="container max-w-4xl px-6 py-10 mx-auto"> <h1 class="text-4xl font-semibold text-center text-gray-800 dark:text-white">Frequently asked questions</h1> <div class="mt-12 space-y-8"> <div class="border-2 border-gray-100 rounded-lg dark:border-gray-700 accordion__item open"> <button class="flex items-center justify-between w-full p-8"> <h1 class="font-semibold text-gray-700 dark:text-white">How i can play for my appoinment ?</h1> <span class="text-gray-400 bg-gray-200 rounded-full"> <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"> <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M18 12H6" /> </svg> </span> </button> <hr class="border-gray-200 dark:border-gray-700"> <p class="p-8 text-sm text-gray-500 dark:text-gray-300 accordion__content"> Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptas eaque nobis, fugit odit omnis fugiat deleniti animi ab maxime cum laboriosam recusandae facere dolorum veniam quia pariatur obcaecati illo ducimus? </p> </div> </div> </div> </section> </body>Entonces, en esta situación, el "contenido de acordeón" debe display: none siempre. Luego, puede buscar la clase abierta y convertir el contenido de acordeón en display: block .
.accordion__content { display: none; } .open .accordion__content { display: block; }