Имеется несколько вложенных блоков спойлеров (details) с измененными иконками раскрытия. Но на данный момент при раскрытии верхнего меняются и иконки всех внутренних. Не смотря на то, что они находятся в свёрнутом состоянии.
Как это победить и настроить отображение в соответствии с текущим состоянием спойлера?
Код на jsfiddle:
https://jsfiddle.net/su9ybkhe/
<details>
<summary>СПОЙЛЕР 1</summary>
<a href="">ссылка</a>
<a href="">ссылка</a>
<a href="">ссылка</a>
<details>
<summary>СПОЙЛЕР 2</summary>
<a href="">ссылка</a>
<a href="">ссылка</a>
<a href="">ссылка</a>
<a href="">ссылка</a>
</details>
<details>
<summary>СПОЙЛЕР 3</summary>
<a href="">ссылка</a>
<a href="">ссылка</a>
<a href="">ссылка</a>
<a href="">ссылка</a>
<a href="">ссылка</a>
<a href="">ссылка</a>
</details>
</details>
/* ИЗМЕНЕНИЕ МАРКЕРА */
details summary::-webkit-details-marker {
display: none
}
details > summary {
list-style: none;
}
details summary:before {
content: '+';
margin-right: 7px;
}
details[open] summary:before {
content: '-';
}
/*-------------------------*/
a {
display: block;
}
