I recently came across this unique accordion design:
<div class="accordion-item mb-5 overflow-hidden rounded-lg border border-jacarta-100 dark:border-jacarta-600">
<h2 class="accordion-header" id="faq-heading-1">
<button class="accordion-button relative flex w-full items-center justify-between bg-white px-4 py-3 text-left font-display text-jacarta-700 dark:bg-jacarta-700 dark:text-white" type="button" data-bs-toggle="collapse" data-bs-target="#faq-1" aria-expanded="false" aria-controls="faq-1">
<span>Exploring the world of tax and legal advisory</span>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" class="accordion-arrow h-4 w-4 shrink-0 fill-jacarta-700 transition-transform dark:fill-white">
<path fill="none" d="M0 0h24v24H0z"></path>
<path d="M12 13.172l4.95-4.95 1.414 1.414L12 16 5.636 9.636 7.05 8.222z"></path>
</svg>
</button>
</h2>
<div id="faq-1" class="accordion-collapse" aria-labelledby="faq-heading-1" data-bs-parent="#accordionFAQ">
<div class="accordion-body border-t border-jacarta-100 bg-white p-4 dark:border-jacarta-600 dark:bg-jacarta-700">
<p class="dark:text-jacarta-200">Learn how to enter the fascinating world of NFT creation and collection building. Absolutely innovative.
</p>
</div>
</div>
</div>
Upon closely examining the design, I noticed that the item closes immediately after it opens:
https://i.sstatic.net/F3j5a.png
The desired expectation was something like this:
https://i.sstatic.net/i0uAq.png
Further investigation revealed that disabling specific CSS properties via browser inspector provided the desired outcome:
https://i.sstatic.net/px2ut.png
However, there seems to be an issue where the collapse class is added twice when toggling the accordion. This raises questions about the CSS being present in both a stylesheet and inline. With only one file available, how can the accordion button be fixed?