Collapsible Sections Hack

Want to create a page with collapsible sections that are closed by default that looks like this? 

Here's the HTML code: 

<style>
    summary {
        background-color: transparent; font-weight: bold; color: black; cursor: pointer;
    }
    
    details {
        border-top: 1px solid black; margin-top: 10px;
    }
</style>

<p style="text-align: center;"></p>

<h1 style="text-align: center;"><strong>Collapsible Sections Page</strong></h1>
<br>

<p></p>
<div style="text-align: center;">
    <details>
        <summary>SECTION 1 TITLE</summary>

        <p style="text-align: left;">
            <br>
        </p>

        <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel dolor in quam elementum tristique nec vitae lectus. Maecenas eu euismod velit, vitae congue sapien. Ut faucibus tristique lacus, a volutpat orci aliquet eget. Suspendisse id velit ligula. Ut tempus, velit eget venenatis facilisis, massa neque semper ipsum, nec tempus tortor augue a purus. Nulla dictum, nibh et tristique dictum, dolor turpis luctus est, in aliquam metus turpis eu ipsum. Nulla vel neque eget libero blandit bibendum quis quis enim. Proin malesuada quam sit amet sem tincidunt gravida. Nunc varius eros eu mi blandit, ut tincidunt libero bibendum. Sed vehicula est et mauris mollis vestibulum. Ut dictum metus id velit fermentum euismod. Nulla vestibulum dui ut nisi mollis, ac volutpat eros auctor. Proin non justo eu sapien ullamcorper ullamcorper. Fusce fermentum hendrerit ultricies. Aliquam vitae quam vel est fringilla varius in in velit.</p>

        <ul>
            <li style="text-align: left;">Maecenas vel tristique lorem</li>
            <li style="text-align: left;">Ut non justo luctus</li>
            <li style="text-align: left;">Vivamus suscipit semper arcu</li>
        </ul>
        <br>
    </details>

    <details>
        <summary>SECTION 2 TITLE</summary>

        <p style="text-align: left;">
            <br>
        </p>

        <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel dolor in quam elementum tristique nec vitae lectus. Maecenas eu euismod velit, vitae congue sapien. Ut faucibus tristique lacus, a volutpat orci aliquet eget. Suspendisse id velit ligula. Ut tempus, velit eget venenatis facilisis, massa neque semper ipsum, nec tempus tortor augue a purus. Nulla dictum, nibh et tristique dictum, dolor turpis luctus est, in aliquam metus turpis eu ipsum. Nulla vel neque eget libero blandit bibendum quis quis enim. Proin malesuada quam sit amet sem tincidunt gravida. Nunc varius eros eu mi blandit, ut tincidunt libero bibendum. Sed vehicula est et mauris mollis vestibulum. Ut dictum metus id velit fermentum euismod. Nulla vestibulum dui ut nisi mollis, ac volutpat eros auctor. Proin non justo eu sapien ullamcorper ullamcorper. Fusce fermentum hendrerit ultricies. Aliquam vitae quam vel est fringilla varius in in velit.</p>

        <p style="text-align: left;">
            <br>
        </p>
    </details>

    <details>
        <summary>SECTION 3 TITLE</summary>

        <p>
            <br>
        </p>

        <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel dolor in quam elementum tristique nec vitae lectus. Maecenas eu euismod velit, vitae congue sapien. Ut faucibus tristique lacus, a volutpat orci aliquet eget. Suspendisse id velit ligula. Ut tempus, velit eget venenatis facilisis, massa neque semper ipsum, nec tempus tortor augue a purus. Nulla dictum, nibh et tristique dictum, dolor turpis luctus est, in aliquam metus turpis eu ipsum. Nulla vel neque eget libero blandit bibendum quis quis enim. Proin malesuada quam sit amet sem tincidunt gravida. Nunc varius eros eu mi blandit, ut tincidunt libero bibendum. Sed vehicula est et mauris mollis vestibulum. Ut dictum metus id velit fermentum euismod. Nulla vestibulum dui ut nisi mollis, ac volutpat eros auctor. Proin non justo eu sapien ullamcorper ullamcorper. Fusce fermentum hendrerit ultricies. Aliquam vitae quam vel est fringilla varius in in velit.</p>

    </details>

    <details style="text-align: center;">
        <summary>SECTION 4 TITLE</summary>
        <br>

        <p style="text-align: left;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam vel dolor in quam elementum tristique nec vitae lectus. Maecenas eu euismod velit, vitae congue sapien. Ut faucibus tristique lacus, a volutpat orci aliquet eget. Suspendisse id velit ligula. Ut tempus, velit eget venenatis facilisis, massa neque semper ipsum, nec tempus tortor augue a purus. Nulla dictum, nibh et tristique dictum, dolor turpis luctus est, in aliquam metus turpis eu ipsum. Nulla vel neque eget libero blandit bibendum quis quis enim. Proin malesuada quam sit amet sem tincidunt gravida. Nunc varius eros eu mi blandit, ut tincidunt libero bibendum. Sed vehicula est et mauris mollis vestibulum. Ut dictum metus id velit fermentum euismod. Nulla vestibulum dui ut nisi mollis, ac volutpat eros auctor. Proin non justo eu sapien ullamcorper ullamcorper. Fusce fermentum hendrerit ultricies. Aliquam vitae quam vel est fringilla varius in in velit.</p>
    </details>
</div>