Аккордеон закрывается сразу после открытия с попутным ветром css

У меня есть следующий элемент аккордеона:

<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>What is 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 create your very first NFT and how to create your NFT collections. Unique.
            </p>
        </div>
    </div>
</div>

Этот пункт закрывается сразу после открытия:

Я ожидаю увидеть это:

Я определил, что отмена выбора следующих функций css через инспектор браузера дает мне то, что я хочу:

По какой-то причине класс коллапса добавляется дважды, когда я переключаю аккордеон. Почему css создается в таблице стилей и оба встроены? У меня только один файл и он отдельный. Как я могу исправить эту кнопку-аккордеон?

Не используйте для этого div. используйте HTML-тег details

Boguz 21.11.2022 15:32
Как настроить Tailwind CSS с React.js и Next.js?
Как настроить Tailwind CSS с React.js и Next.js?
Tailwind CSS - единственный фреймворк, который, как я убедился, масштабируется в больших командах. Он легко настраивается, адаптируется к любому...
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
Начала с розового дизайна
Начала с розового дизайна
Pink Design - это система дизайна Appwrite с открытым исходным кодом для создания последовательных и многократно используемых пользовательских...
Анимация SVG-узоров без единой строки CSS
Анимация SVG-узоров без единой строки CSS
Недавно я работал над веб-проектом, который позволил мне поэкспериментировать с шаблонами SVG. С SVG очень приятно работать, как только вы получите...
Неделя 1 - Карточки с временной шкалой
Неделя 1 - Карточки с временной шкалой
Поскольку это была первая неделя, я решил начать с простого. Предполагалось, что у меня будет временная шкала с несколькими карточками, которые можно...
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
8 репозиториев GitHub, о которых должен знать каждый веб-разработчик
Здесь представлена дополнительная информация о восьми репозиториях GitHub, о которых должен знать каждый веб-разработчик:
0
1
88
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Проблема возникает из-за того, что попутный ветер добавляет свойство коллапса, которое должно быть пустым. Ссылка ниже:

Https://github.com/tailwindlabs/tailwindcss/issues/9663

Для краткосрочного решения сделайте следующее:

  1. В tailwind.config.js добавьте это свойство:

    corePlugins: {
      visibility: false
    },

  1. В src/css/style.css добавьте следующее:

@layer utilities {
  .visible {
    visibility: visible;
  }
  .invisible {
    visibility: hidden;
  }
}

Другие вопросы по теме