Скрытие других элементов в сворачиваемом списке ⇐ CSS

[Anonymous]

Чего я хочу достичь:
Я составляю список, в котором я хочу, чтобы каждый элемент был сворачиваемым, но я хочу скрыть все остальные элементы списка, когда один из них свернут.
Когда один элемент списка «свернут» и отображается, я хочу переключить отображение сворачиваемого элемента на «нет» и быть можно «развернуть или вернуться к исходному складному состоянию», щелкнув свернутый .


Что у меня есть на данный момент:

Код: Выделить всё

var coll = document.getElementsByClassName("collapsecontent");
var i;

for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}

Код: Выделить всё

button.collapsecontent {
display: block;
background-color: orange;
border-color: blue;
border-radius: 20px;
width: 87.5%;
margin-left: 6.2%;
margin-top: 1%;
transition: ease-out 10s;
/*transition broken*/
cursor: pointer;
}

div.content {
display: none;
background-color: orange;
margin-left: 6.2%;
margin-right: 6.2%;
padding: 5%;
border: 2px solid blue;
border-radius: 20px;
cursor: pointer;
}

Код: Выделить всё

[list]

[*]Works

Example

[*]Other

Example2

[*]About

Example3

[*]Placeholder

Example4

[/list]

Я также готов изучить другие способы, кроме складных, если они позволят добиться того же результаты, но это был единственный способ, который я мог придумать.

Подробнее здесь: https://stackoverflow.com/questions/791 ... sible-list