Open a Collapsible Element By Anchor

The Goal: Using the Boostrap collapsible element we need to have an anchor point to take the visitors to a certain collapsible item within the page using the hash ID in the URL (e.g. https://mysite.com/mypage#2), and have the collapsible element open by default.

Final Result:
This is the URL that takes you to the open 2nd collapsible element (#2):
https://kenticode.com/open-a-collapsible-element-by-query-string/#2

What we need to do:
We need to extract the fragment from the URL (e.g., 2 from https://mysite.com/mypage#2).
Then, finds the corresponding div elements: “card-header” with an ID matching the fragment and “.collapse” element with aria-labelledby matching the fragment.
Next, add the necessary classes: “card-header” gets the “active” class and “collapse” gets the “show” class.

Solution:
We can use JavaScript to check the URL fragment (the part after #) and apply the necessary class changes dynamically.

This is the HTML code for the collapsible elements:

<div class="row">
    <div class="col-lg-12">
 
        <div class="card">
            <div class="card-header m-0" id="1">
                <span class="text-left" type="button" data-toggle="collapse" data-target="#collapse-1" aria-expanded="true" aria-controls="1">
                    Collapsible Title 1
                </span>
            </div>
            <div id="collapse-1" class="collapse" aria-labelledby="1">
                <div class="card-body pb-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur mi eget ligula varius, ut interdum justo laoreet.
                </div>
            </div>
        </div>
                 
        <div class="card">
            <div class="card-header m-0" id="2">
                <span class="text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-2" aria-expanded="false" aria-controls="2">
                    Collapsible Title 2
                </span>
            </div>
            <div id="collapse-2" class="collapse" aria-labelledby="2">
                <div class="card-body pb-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur mi eget ligula varius, ut interdum justo laoreet.
                </div>
            </div>
        </div>
         
        <div class="card">
            <div class="card-header m-0" id="3">
                <span class="text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-3" aria-expanded="false" aria-controls="3">
                    Collapsible Title 3
                </span>
            </div>
            <div id="collapse-3" class="collapse" aria-labelledby="3">
                <div class="card-body pb-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur mi eget ligula varius, ut interdum justo laoreet.
                </div>
            </div>
        </div>
         
        <div class="card">
            <div class="card-header m-0" id="4">
                <span class="text-left collapsed" type="button" data-toggle="collapse" data-target="#collapse-4" aria-expanded="false" aria-controls="4">
                    Collapsible Title 4
                </span>
            </div>
            <div id="collapse-4" class="collapse" aria-labelledby="4">
                <div class="card-body pb-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur mi eget ligula varius, ut interdum justo laoreet.
                </div>
            </div>
        </div>
         
        <div class="card">
            <div class="card-header m-0" id="5">
                <span class="text-left" type="button" data-toggle="collapse" data-target="#collapse-5" aria-expanded="true" aria-controls="5">
                    Collapsible Title 5
                </span>
            </div>
            <div id="collapse-5" class="collapse" aria-labelledby="5">
                <div class="card-body pb-3">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum consectetur mi eget ligula varius, ut interdum justo laoreet.
                </div>
            </div>
        </div>
 
    </div>
</div>

This is the JavaScript code:

<script>
document.addEventListener("DOMContentLoaded", function () {
    // Get the fragment (the part after # in the URL)
    const fragment = window.location.hash.substring(1); // Remove the # symbol
 
    if (fragment) {
        // Find the elements by ID
        const cardHeader = document.getElementById(fragment);
        const collapseDiv = document.querySelector(`.collapse[aria-labelledby="${fragment}"]`);
 
        // Add classes if elements exist
        if (cardHeader) {
            cardHeader.classList.add("active");
        }
        if (collapseDiv) {
            collapseDiv.classList.add("show");
        }
    }
});
</script>

Don’t forget, the above script runs after the page is loaded, ensuring all elements exist before modifying them.

Here’s the working example for the Collapsing Elements:

Collapsible Title 1