Issues with nested collapsibles

[Raul-Karimov]

When a collapsible is nested inside another collapsible, the following quirks occur:

• CSS classes associated with hs-collapse-open do not apply to the SVG inside the <button/> of a collapsible child
• The content of the collapsible child expands correctly, but the height of the parent container does not change, resulting in a visual overlap.

<ul data-hs-scrollspy="#scrollspy" data-hs-scrollspy-scrollable-parent="#scrollspy-scrollable-parent">
    <li data-hs-scrollspy-group="">
        <div class="has-hs-scrollspy-active:text-blue-600 dark:has-hs-scrollspy-active:text-blue-500 dark:text-neutral-200 flex items-center py-2 gap-2">
            <button type="button" class="cursor-pointer hs-collapse-toggle hover:pointer" id="hs-id1-collapse"
                    aria-expanded="false" aria-controls="hs-id1-collapse-sections"
                    data-hs-collapse="#hs-id1-collapse-sections">
                <svg xmlns="http://www.w3.org/2000/svg" class="hs-collapse-open:rotate-90 shrink-0 size-4" width="24"
                     height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                     stroke-linecap="round" stroke-linejoin="round">
                    <path d="m9 18 6-6-6-6"></path>
                </svg>
            </button>
            <a href="#id1" class="text-sm/6 font-medium text-gray-700 hover:text-gray-900 focus:outline-hidden focus:text-blue-600 dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-blue-500 hs-scrollspy-active:text-blue-600 dark:hs-scrollspy-active:text-blue-500        
      ">Preface</a>
        </div>
        <ul id="hs-id1-collapse-sections" class="hs-collapse hidden pl-2" aria-labelledby="hs-id1-collapse">
            <li class="ms-4"><a href="#id3" class="
           group flex items-center gap-x-2 py-0.5 text-sm text-gray-700 leading-6 hover:text-gray-800 focus:outline-hidden focus:text-blue-600 dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-blue-500 hs-scrollspy-active:text-blue-600 dark:hs-scrollspy-active:text-blue-500
        ">About US</a></li>
        </ul>
    </li>
    <li data-hs-scrollspy-group="">
        <div class="has-hs-scrollspy-active:text-blue-600 dark:has-hs-scrollspy-active:text-blue-500 dark:text-neutral-200 flex items-center py-2 gap-2">
            <button type="button" class="cursor-pointer hs-collapse-toggle hover:pointer"
                    id="hs-using-interface-collapse" aria-expanded="false"
                    aria-controls="hs-using-interface-collapse-sections"
                    data-hs-collapse="#hs-using-interface-collapse-sections">
                <svg xmlns="http://www.w3.org/2000/svg" class="hs-collapse-open:rotate-90 shrink-0 size-4" width="24"
                     height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"
                     stroke-linecap="round" stroke-linejoin="round">
                    <path d="m9 18 6-6-6-6"></path>
                </svg>
            </button>
            <a href="#using-interface" class="text-sm/6 font-medium text-gray-700 hover:text-gray-900 focus:outline-hidden focus:text-blue-600 dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-blue-500 hs-scrollspy-active:text-blue-600 dark:hs-scrollspy-active:text-blue-500        
      ">Using the Motif Interface</a>
        </div>
        <ul id="hs-using-interface-collapse-sections" class="hs-collapse hidden pl-2"
            aria-labelledby="hs-using-interface-collapse">
            <li data-hs-scrollspy-group="">
                <div class="has-hs-scrollspy-active:text-blue-600 dark:has-hs-scrollspy-active:text-blue-500 dark:text-neutral-200 flex items-center py-2 gap-2">
                    <button type="button" class="cursor-pointer hs-collapse-toggle hover:pointer"
                            id="hs-section_ams_dnw_qcc-collapse" aria-expanded="false"
                            aria-controls="hs-section_ams_dnw_qcc-collapse-sections"
                            data-hs-collapse="#hs-section_ams_dnw_qcc-collapse-sections">
                        <svg xmlns="http://www.w3.org/2000/svg" class="hs-collapse-open:rotate-90 shrink-0 size-4"
                             width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor"
                             stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                            <path d="m9 18 6-6-6-6"></path>
                        </svg>
                    </button>
                    <a href="#section_ams_dnw_qcc" class="text-sm/6 font-medium text-gray-700 hover:text-gray-900 focus:outline-hidden focus:text-blue-600 dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-blue-500 hs-scrollspy-active:text-blue-600 dark:hs-scrollspy-active:text-blue-500">Overview</a>
                </div>
                <ul id="hs-section_ams_dnw_qcc-collapse-sections" class="hs-collapse hidden pl-2"
                    aria-labelledby="hs-section_ams_dnw_qcc-collapse">
                    <li class="ms-4"><a href="#Changing_the_source_Files" class="group flex items-center gap-x-2 py-0.5 text-sm text-gray-700 leading-6 hover:text-gray-800 focus:outline-hidden focus:text-blue-600 dark:text-neutral-400 dark:hover:text-neutral-300 dark:focus:text-blue-500 hs-scrollspy-active:text-blue-600 dark:hs-scrollspy-active:text-blue-500">Changing the Source Files</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>