How to Create Collapsible Sections on a Page or Post

Collapsible Sections provide a user-friendly way to organize any page where you want to offer in-depth information while keeping the layout clean and easily navigable. Plus, it just looks cool! 

I used ChatGPT to generate the following codes for two different styles of collapsible sections. You can either go in manually and change colors/content or you can paste this code in ChatGPT and tell it what you want to change. 

NOTE: The Collapsible Section code only gets pasted on the page or post where you want it displayed. No CSS code is required.

Minimalist Collapsible Sections

This is a screenshot of the minimalist collapsible sections:

This code gets pasted on the page or post. Just click on the <> icon and paste! 

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

    </style>
</p>

<p>
    <br>
</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. </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.</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.</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.</p>
    </details>
</div>

Color Block Collapsible Sections

This is a screenshot of the color block collapsible sections:

This code gets pasted on the page or post. Just click on the <> icon and paste! 

    <style>
        .section-header {
            background-color: #809e2f; color: #ffffff; padding: 10px; cursor: pointer; border: 1px solid #DFD9C3;
        }
        
        .section-content {
            display: none; padding: 10px; border: 1px solid #DFD9C3; border-top: none;
        }
        
        .section-header::before {
            content: "+"; display: inline-block; margin-right: 5px;
        }
        
        .section-header.active::before {
            content: "-";
        }

    </style>
    <script>
        function toggleSection(sectionId)
        {
            const section = document.getElementById(sectionId);
            const header = section.previousElementSibling;
            header.classList.toggle("active");
            section.style.display = header.classList.contains("active") ? "block" : "none";
        }

    </script>

    <span style="font-size: 16px;"></span>
    <br>
</p>
<div class="section">
    <div class="section-header" onclick="toggleSection('section-1')">
        Section 1
    </div>
    <div class="section-content" id="section-1">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget tellus scelerisque, tincidunt nunc quis, tincidunt dolor. Pellentesque ullamcorper mauris ac iaculis ultricies. Mauris viverra sem at tristique congue. Aenean facilisis elit eget dolor congue, nec luctus lectus egestas. Nullam nec suscipit ex. Fusce mollis mollis justo, eget interdum massa fringilla eu. Nam vel dictum est.
    </div>
</div>
<div class="section">
    <div class="section-header" onclick="toggleSection('section-2')">
        Section 2
    </div>
    <div class="section-content" id="section-2">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget tellus scelerisque, tincidunt nunc quis, tincidunt dolor. Pellentesque ullamcorper mauris ac iaculis ultricies. Mauris viverra sem at tristique congue. Aenean facilisis elit eget dolor congue, nec luctus lectus egestas. Nullam nec suscipit ex. Fusce mollis mollis justo, eget interdum massa fringilla eu. Nam vel dictum est.
    </div>
</div>
<div class="section">
    <div class="section-header" onclick="toggleSection('section-3')">
        Sectioni 3
    </div>
    <div class="section-content" id="section-3">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget tellus scelerisque, tincidunt nunc quis, tincidunt dolor. Pellentesque ullamcorper mauris ac iaculis ultricies. Mauris viverra sem at tristique congue. Aenean facilisis elit eget dolor congue, nec luctus lectus egestas. Nullam nec suscipit ex. Fusce mollis mollis justo, eget interdum massa fringilla eu. Nam vel dictum est.
    </div>
</div>
<div class="section">
    <div class="section-header" onclick="toggleSection('section-4')">
        Section 4
    </div>
    <div class="section-content" id="section-4">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eget tellus scelerisque, tincidunt nunc quis, tincidunt dolor. Pellentesque ullamcorper mauris ac iaculis ultricies. Mauris viverra sem at tristique congue. Aenean facilisis elit eget dolor congue, nec luctus lectus egestas. Nullam nec suscipit ex. Fusce mollis mollis justo, eget interdum massa fringilla eu. Nam vel dictum est.
    </div>
</div>