I am a beginner in programming, and I am trying to create a FAQ for my portfolio site.
I'm using the tailwind css framework and I'm not getting accordion with javascript, could you help me?
I have the class accordion__item when clicked on the element, I want it to show the content contained in the accordion__content paragraph element, and when clicked again, that it closes the content. Can you help me?
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>The problem here is that you are toggling display: block. Initially elements are either block or inline based on their nature.
Next thing is that you are toggling it on the container which contains the toggle button as well.
To fix it we need to toggle the display: none which is actually hiding elements and move the class toggle target from the container to its content.
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>So in this situation, the "accordion__content" should be display: none always. Then you can check for the open class and turn accordion__content into display: block.
.accordion__content {
display: none;
}
.open .accordion__content {
display: block;
}