How do i create an accordion within an accordion in HTML and CSS?

Here is the CSS and HTML for the second example I posted.

The HTML does a lot of indenting/wrapping so sorry that looks funny in forum.

Good luck with this - be sure to test thoroughly and change data to suit your applicaiton.

CSS

/** Nested Accordion **/


        #nestAccord * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        #nestAccord body {
            font-family: Arial, sans-serif;
            background-color: #ffffff;
            padding: 20px;
            line-height: 1.6;
        }

        #nestAccord .container {
            max-width: 800px;
            margin: 0 auto;
        }

        #nestAccord h1 {
            text-align: center;
            color: #1e40af;
            margin-bottom: 30px;
            font-weight: 600;
        }

        /* Hide all checkboxes */
        #nestAccord input[type="checkbox"] {
            display: none;
        }

        /* Parent Accordion Styles */
        #nestAccord .parent-accordion {
            list-style: none;
            background: white;
            border-radius: 8px;
	        margin-bottom: 10px;
            padding: 10px 10px 10px 0px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.8);
            overflow: hidden;
        }

        #nestAccord .parent-item {
            border-bottom: 10px solid #ffffff;
        }

        #nestAccord .parent-item:last-child {
            border-bottom: 30px;
        }

        #nestAccord .parent-toggle {
            display: block;
            padding: 15px 20px;
            background: #2563eb;
            color: white;
            cursor: pointer;
            border-radius: 8px;
	        user-select: none;
            font-weight: 600;
            font-size: 16px;
            transition: all 0.3s ease;
            position: relative;
        }

        #nestAccord .parent-toggle:hover {
            background: #1d4ed8;
            transform: translateY(-1px);
        }

        #nestAccord .parent-toggle::after {
            content: '▼';
            position: absolute;
            right: 20px;
            top: 50%;
            transform: translateY(-50%) rotate(-90deg);
            transition: transform 0.3s ease;
            font-size: 18px;
        }

        /* Parent accordion content */
        #nestAccord .parent-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.4s ease-out;
            background: white;
        }


        #nestAccord .parent-item:has(.parent-toggle input[type="checkbox"]:checked) .parent-content {
            max-height: 1000px;
            transition: max-height 0.4s ease-in;
        }

        #nestAccord .parent-toggle:has(input[type="checkbox"]:checked)::after {
            transform: translateY(-50%) rotate(0deg);
        }

        /* Fallback for browsers that don't support :has() */
        #nestAccord .parent-toggle input[type="checkbox"]:checked ~ .arrow-icon {
            transform: translateY(-50%) rotate(0deg);
        }

        /* Child Accordion Styles */
        #nestAccord .child-accordion {
            list-style: none;
            margin: 0;
            padding: 0;
            margin-right: 15px;
        }

        #nestAccord .child-item {
            border-bottom: 1px solid #000000;
        }

        #nestAccord .child-item:last-child {
            border-bottom: 10px;
        }

        #nestAccord .child-toggle {
            display: block;
            padding: 15px 24px;
            background: #ffffff;
            color: #000000;
            cursor: pointer;
            font-weight: 500;
            font-size: 14px;
            transition: all 0.2s ease;
            position: relative;
            border-left: 4px solid transparent;
        }

        #nestAccord .child-toggle:hover {
            background: #edf2f7;
            border-left-color: #46a2ee;
            color: #2d3748;
        }

        #nestAccord .child-toggle::after {
            content: '▲';
            position: absolute;
            right: 24px;
            top: 50%;
            transform: translateY(-50%) rotate(180deg);
            transition: transform 0.2s ease;
            font-size: 12px;
            color: #000000;
        }

        /* Child accordion content */
        #nestAccord .child-content {
            max-height: 0;
            overflow: hidden;
            transition: max-height 0.3s ease-out;
            background: #cbe2f1;
        }

        #nestAccord .child-content-inner {
            padding: 20px 24px;
            color: #000000;
            font-size: 14px;
        }

        /* When child checkboxes are checked */
        #nestAccord .child-item:has(.child-toggle input[type="checkbox"]:checked) .child-content {
            max-height: 300px;
            transition: max-height 0.3s ease-in;
        }

        #nestAccord .child-toggle:has(input[type="checkbox"]:checked)::after {
            transform: translateY(-50%) rotate(0deg);
        }

        #nestAccord .child-toggle:has(input[type="checkbox"]:checked) {
            background: #98bff7;
            border-left-color: #46a2ee;
            color: #000000;
        }

        /* Contact Information Styling */
        #nestAccord .contact-info {
            background: white;
            padding: 15px;
            border-radius: 6px;
            border-left: 4px solid #46a2ee;
        }

        #nestAccord .contact-field {
            margin-bottom: 8px;
        }

        #nestAccord .contact-field:last-child {
            margin-bottom: 0;
        }

        #nestAccord .contact-label {
            font-weight: 600;
            color: #2d3748;
            display: inline-block;
            width: 70px;
        }

        #nestAccord .contact-value {
            color: #4a5568;
        }


/** End Nested Accordion **/

HTML

    <div class="container" id="nestAccord">
        <h1>Global Office Contacts</h1>

        <ul class="parent-accordion">
            <!-- United States -->
            <li class="parent-item">
                <label class="parent-toggle">
                    <input type="checkbox" id="us-toggle" value="" />
                    <span class="parent-toggle-text">United States</span>
                </label>
                <div class="parent-content">
                    <ul class="child-accordion">
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="us-sales" value="" />
                                <span class="child-toggle-text">Sales Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">John Smith</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">j.smith@company.com</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+1 (555) 123-4567</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 6 PM EST</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="us-service" value="" />
                                <span class="child-toggle-text">Service Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Sarah Johnson</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">s.johnson@company.com</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+1 (555) 234-5678</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">8 AM - 8 PM EST</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="us-finance" value="" />
                                <span class="child-toggle-text">Finance Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Michael Davis</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">m.davis@company.com</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+1 (555) 345-6789</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 5 PM EST</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>

            <!-- United Kingdom -->
            <li class="parent-item">
                <label class="parent-toggle">
                    <input type="checkbox" id="uk-toggle" value="" />
                    <span class="parent-toggle-text">United Kingdom</span>
                </label>
                <div class="parent-content">
                    <ul class="child-accordion">
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="uk-sales" value="" />
                                <span class="child-toggle-text">Sales Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Emma Thompson</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">e.thompson@company.co.uk</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+44 20 7123 4567</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 5:30 PM GMT</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="uk-service" value="" />
                                <span class="child-toggle-text">Service Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">James Wilson</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">j.wilson@company.co.uk</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+44 20 7234 5678</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">8 AM - 7 PM GMT</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="uk-finance" value="" />
                                <span class="child-toggle-text">Finance Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Oliver Brown</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">o.brown@company.co.uk</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+44 20 7345 6789</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 5 PM GMT</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>

            <!-- Germany -->
            <li class="parent-item">
                <label class="parent-toggle">
                    <input type="checkbox" id="de-toggle" value="" />
                    <span class="parent-toggle-text">Germany</span>
                </label>
                <div class="parent-content">
                    <ul class="child-accordion">
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="de-sales" value="" />
                                <span class="child-toggle-text">Sales Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Hans Mueller</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">h.mueller@company.de</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+49 30 1234 5678</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 6 PM CET</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="de-service" value="" />
                                <span class="child-toggle-text">Service Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Ingrid Schmidt</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">i.schmidt@company.de</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+49 30 2345 6789</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">8 AM - 7 PM CET</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="de-finance" value="" />
                                <span class="child-toggle-text">Finance Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Klaus Weber</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">k.weber@company.de</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+49 30 3456 7890</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 5 PM CET</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>

            <!-- Japan -->
            <li class="parent-item">
                <label class="parent-toggle">
                    <input type="checkbox" id="jp-toggle" value="" />
                    <span class="parent-toggle-text">Japan</span>
                </label>
                <div class="parent-content">
                    <ul class="child-accordion">
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="jp-sales" value="" />
                                <span class="child-toggle-text">Sales Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Takeshi Yamamoto</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">t.yamamoto@company.jp</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+81 3 1234 5678</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 6 PM JST</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="jp-service" value="" />
                                <span class="child-toggle-text">Service Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Yuki Tanaka</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">y.tanaka@company.jp</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+81 3 2345 6789</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">8 AM - 8 PM JST</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li class="child-item">
                            <label class="child-toggle">
                                <input type="checkbox" id="jp-finance" value="" />
                                <span class="child-toggle-text">Finance Contact</span>
                            </label>
                            <div class="child-content">
                                <div class="child-content-inner">
                                    <div class="contact-info">
                                        <div class="contact-field">
                                            <span class="contact-label">Name:</span>
                                            <span class="contact-value">Hiroshi Sato</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Email:</span>
                                            <span class="contact-value">h.sato@company.jp</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Phone:</span>
                                            <span class="contact-value">+81 3 3456 7890</span>
                                        </div>
                                        <div class="contact-field">
                                            <span class="contact-label">Hours:</span>
                                            <span class="contact-value">9 AM - 5 PM JST</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>