Не срабатывает код CSS на сайте
Есть код на сайте, некое подобие плитки тэгов. Код нашёл где-то на бескрайних просторах. При нажатии на кнопку всё отлично открывалось, но в какой-то момент полез добавлять в ссылки в код html и просто кнопка на сайте перестала открывать весь контент. В чём причина не могу понять. Код здесь в том состоянии в котором он уже не работает. Странно что на jsfiddle он открывается. Но копируя код на другой сайт - абсолютно такая же ситуация(не работает). Помогите найти решение проблемы.
<button>Показать все</button>
<div class="text">
<div class="wp-block-buttons">
<!-- wp:button {"borderRadius":6,"className":"is-style-outline"} -->
<div class="wp-block-buttons">
<!-- wp:button {"borderRadius":6,"className":"is-style-outline"} -->
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/">товары для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/chaj-dlja-pohudenija/">чай для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/chaj-dlja-pohudenija/">чай для похудения эффективный</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/kapli-dlya-pohudeniya/">капли для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/poroshok-dlya-pohudeniya/">порошок для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/napitki-dlya-pohudeniya/">напитки для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/tabletki-dlya-pohudeniya/">таблетки для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/tabletki-dlya-pohudeniya/">средство для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product-category/dlja-pohudenija/kapsuly-dlya-pohudeniya">капсулы для похудения</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/tea-n-tea/">tea n tea</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/purpurnyj-chaj-chang-shu/">пурпурный чай чанг шу</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/purpurnyj-chaj-chang-shu/">пурпурный чай</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/purpurnyj-chaj-chang-shu/">чанг шу</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/harmonica-linea/">harmonica linea</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/harmonica-linea/">гармоника линеа</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/bee-slim/">bee slim</a></div>
<div class="wp-block-button is-style-outline"><a class="wp-block-button__link" style="border-radius: 6px;" href="https://pharm03.ru/product/personal-slim/">personal slim</a></div>
</div>
</div>
</div>
<!-- /wp:button -->
<!-- /wp:button -->
/*Стили кнопки плитки тэгов*/
.wp-block-buttons {
background-color: #fff;
color: #32373c;
border-radius: 10px 10px;
}
/*Стиль плитки тэгов*/
button {outline: none;}
.text {
display: block;
width: auto;
height: 60px;
padding: 5px;
margin-top: 10px;
margin:0 auto;
outline: none;
overflow: hidden;
}
.text:focus, button:focus ~ .text {height: auto;}
Ответы (1 шт):
Автор решения: Qwertiy
→ Ссылка
.text:focus, button:focus ~ .text {height: auto;}
.text:focus, .text:focus-within, button:focus ~ .text {height: auto;}
Но это костыль. Надо снести всё это и сделать по-человечески - либо скриптом, либо через чекбокс.