Collapsible div - expand and collapse

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><a href="#collapse1" data-toggle="collapse">Question 1</a></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><a href="#collapse2" data-toggle="collapse">Question 2</a></strong></h3>
        </div>
        <div id="collapse2" class="panel-collapse collapse">
            <div class="panel-body">Answer 2</div>
        </div>
    </div>

The `
` element might work for you --> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details (I think Edge support is limited / nonexistent though) — sol, Jul 05 '18 at 09:22
Possible duplicate of [Linking to a section of an Accordion from another page](https://stackoverflow.com/questions/12008389/linking-to-a-section-of-an-accordion-from-another-page) — CBroe, Jul 05 '18 at 09:51

score 0 · Answer 1 · answered Jul 05 '18 at 10:04

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><a href="#collapse1" data-toggle="collapse">Question 1</a></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><a href="#collapse2" data-toggle="collapse">Question 2</a></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>

score 0 · Answer 2 · answered Apr 03 '23 at 22:52

You don't need any JavaScript, just the CSS :target.
Such element will also expand if someone opens your page navigating with an URI like yourwebsite.com/qa.php#collapse2

.panel-collapse { display: none; }
.panel-collapse:target { display: block; }

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title"><strong><a href="#collapse1" data-toggle="collapse">Question 1</a></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><a href="#collapse2" data-toggle="collapse">Question 2</a></strong></h3>
  </div>
  <div id="collapse2" class="panel-collapse collapse">
    <div class="panel-body">Answer 2</div>
  </div>
</div>

Collapsible div - expand and collapse

2 Answers2