Краткий ответ
В общем, да, это возможно сделать, но у него есть огромные ограничения из-за ограничений CSS ( Cascading Style Sheets), так что на самом деле ответ нет .
Длинный ответ
Проблема, с которой мы сталкиваемся, заключается в том, что вы не сможете реализовать решение динамически без каких-либо JavaScript.Вы можете видеть, что в возможном ответе вы связались.В чистом CSS это возможно только для элементов, указанных в файле.Как CSS может узнать, какой checkbox проверить (при условии использования хака checkbox) или какой ответ расширить, если вы нажмете на ссылку?Ответ прост: Он не может .
Так что единственный способ сделать это без JavaScript - это сделать это не динамически.Проблема в том, что вы не можете нацеливаться на родительские элементы ( Каскадные Таблицы стилей), поэтому нет даже чистого способа CSS даже открыть другой элемент, если, например, гиперссылка находится в :focusи вы также не можете установить / снять флажки с помощью CSS.
Это приводит нас к JavaScript как единственно возможному решению с вашей структурой кода.
.spoilerbutton {
position: absolute;
margin-top: 9px 0 0 -5px;
height: 35px;
width: 102px;
opacity: 0;
}
.spoilerbutton:checked {
width: 86px;
}
.spoilerbutton~.text::after {
content: "Antwoord";
}
.spoilerbutton:checked~.text::after {
content: "Verberg";
}
.spoilerbutton~.spoiler {
display: none;
}
.spoilerbutton:checked~.spoiler {
padding: 5px;
display: block;
}
<div>
<strong>1. Question 1?</strong>
<p class="text"></p>
<input class="spoilerbutton" type="checkbox" />
<h2 class="text"></h2>
<div class="spoiler">
<div>
<ul>
<li><a onclick="document.querySelector(this.attributes['href'].value + ' .spoilerbutton').checked = true;" href="#answer3">Open answer 3</a></li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
</div>
<div>
<strong>1. Question 2?</strong>
<p class="text"></p>
<input class="spoilerbutton" type="checkbox" />
<h2 class="text"></h2>
<div class="spoiler">
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
</div>
<div style="margin-top: 500px" id="answer3">
<strong>1. Question 3?</strong>
<p class="text"></p>
<input class="spoilerbutton" type="checkbox" />
<h2 class="text"></h2>
<div class="spoiler">
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
</div>
Достаточно одной строки кода:
document.querySelector(this.attributes['href'].value + ' .spoilerbutton').checked = true;
Редактировать
На самом деле я забыл о :target псевдокласс.Но Хасан Сиддики уже завершил свой ответ этим.Однако вам придется реструктурировать свой код, и если вы хотите использовать подход JavaScript (который я настоятельно рекомендую), я предпочитаю свою строку кода.