Collapsible div - expand and collapse - html

Question

Help please!
I'm creating a FAQs webpage where theres approx 50 questions. Therefore, I'm using collapsible divs so that the page isn't too long. Below is the code I've used so far.
I'm wondering if its possible to have a hyperlink (e.g. /#question20) where I can jump to a particular div which is automatically expanded by clicking on the hyperlink?
Also, what would be the best way of creating expand all / collapse all buttons?
Thanks in advance!
<div class="panel-group" style="width: 70%; float: right; min-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 1</strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Answer 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 2</strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">Answer 2</div>
</div>
</div>

Answer 1

With only html you can use <details> and <summary> tag
If you want use javascript, you should create a tag and add a load event listener to it.
in the function associated for that listener you can toggle a class called hidden or change directly the style, for example we change the style with a new class called hidden to the divs you can expand and hide:
change your html to add a new class to the hidden div:
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 1</strong></h3>
</div>
<div id="collapse1" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 1</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title"><strong>Question 2</strong></h3>
</div>
<div id="collapse2" class="panel-collapse collapse hidden">
<div class="panel-body">Answer 2</div>
</div>
</div>
add a new css rule
.hidden {
display: none;
}
and finally the script:
<script>
document.addEventListener('DOMContentLoaded',function() {
var expandLinks = document.querySelectorAll('.panel-heading .panel-title a ');
for(var i = 0; i < expandLinks.length; i++) {
expandLinks[i].addEventListener('click', function(event) {
console.log(event.currentTarget);
var selector = event.currentTarget.getAttribute("href");
var answersDiv = document.querySelector(selector);
answersDiv.classList.toggle('hidden');
});
}
});
</script>