Looks like you’re working inside a super-locked-down page (strict CSP + Trusted Types, no inline JS allowed). If you just need a collapsible catalog/accordion that will work in this environment, here are two zero-JS patterns you can drop into any container (e.g., a custom HTML slot). Both avoid scripts, event handlers, and external assets.

A) Easiest & most robust (multi-open) — <details>/<summary>

<!-- CSP-safe collapsible list (multiple sections can be open) -->
<section class="ntp-accordion">
  <details open>
    <summary>🌐 Connectivity</summary>
    <ul>
      <li><a href="https://solveforce.com/%f0%9f%8c%90-broadband-services/">Broadband Services</a></li>
      <li><a href="https://solveforce.com/%f0%9f%93%a1-telecom-services/">Telecom Services</a></li>
      <li><a href="https://solveforce.com/%f0%9f%93%b2-unified-communications-ucaas/">Unified Communications (UCaaS)</a></li>
      <li><a href="https://solveforce.com/%f0%9f%93%b6-wi-fi/">Wi-Fi</a></li>
      <li><a href="https://solveforce.com/%f0%9f%9b%b0%ef%b8%8f-satellite-internet/">Satellite</a></li>
    </ul>
  </details>

  <details>
    <summary>☁️ Cloud</summary>
    <ul>
      <li><a href="https://solveforce.com/%e2%98%81%ef%b8%8f-adaptive-cloud-services/">Adaptive Cloud Services</a></li>
      <li><a href="https://solveforce.com/%e2%98%81%ef%b8%8f-cloud-computing/">Cloud Computing</a></li>
      <li><a href="https://solveforce.com/%f0%9f%8f%a2-data-centers/">Data Centers</a></li>
      <li><a href="https://solveforce.com/%f0%9f%96%a7-managed-it-services/">Managed IT Services</a></li>
    </ul>
  </details>

  <details>
    <summary>🛡️ Security</summary>
    <ul>
      <li><a href="https://solveforce.com/%f0%9f%9b%a1%ef%b8%8f-cybersecurity-solutions/">Cybersecurity Solutions</a></li>
    </ul>
  </details>

  <details>
    <summary>🖥️ IT &amp; Operations</summary>
    <ul>
      <li><a href="https://solveforce.com/%f0%9f%96%a7-managed-it-services/">Managed IT Services</a></li>
      <li><a href="https://solveforce.com/%f0%9f%93%a1-telecom-services/">Telecom Services</a></li>
    </ul>
  </details>

  <details>
    <summary>🌍 Edge &amp; IoT</summary>
    <ul>
      <li><a href="https://solveforce.com/%f0%9f%8c%8d-internet-of-things-iot/">Internet of Things (IoT)</a></li>
      <li><a href="https://solveforce.com/%f0%9f%8c%8d-edge-computing/">Edge Computing</a></li>
    </ul>
  </details>

  <p class="ntp-dir">
    <a href="https://solveforce.com/%f0%9f%8c%90-solveforce-service-directory/">🌐 Browse the full SolveForce Service Directory</a>
  </p>
</section>

<style>
  .ntp-accordion { max-width: 900px; margin: 0 auto; font: inherit; }
  .ntp-accordion details { background:#fff; border:1px solid #e3e6ea; border-radius:12px; padding:0; margin:10px 0; }
  .ntp-accordion summary { list-style:none; padding:14px 16px; font-weight:700; cursor:pointer; }
  .ntp-accordion summary::-webkit-details-marker { display:none; }
  .ntp-accordion details[open] summary { border-bottom:1px solid #eef1f4; }
  .ntp-accordion ul { margin:0; padding:12px 22px 16px 26px; }
  .ntp-accordion a { text-decoration:none; border-bottom:1px dashed transparent; }
  .ntp-accordion a:hover { border-color:rgba(10,88,202,.35); }
  .ntp-dir { text-align:center; margin:16px 0 0; font-weight:700; }
</style>

Why this is ideal here

  • Native HTML behavior (toggle handled by the browser).
  • No scripts, no custom events, no external fonts/images → friendly to strict CSP and Trusted Types.

B) Single-open (radio hack), also CSP-safe

<!-- Single-open accordion (only one section open at a time) -->
<div class="ntp-accordion-one">
  <!-- Controls -->
  <input type="radio" name="ntp-acc" id="ntp-1" checked hidden>
  <input type="radio" name="ntp-acc" id="ntp-2" hidden>
  <input type="radio" name="ntp-acc" id="ntp-3" hidden>
  <input type="radio" name="ntp-acc" id="ntp-4" hidden>
  <input type="radio" name="ntp-acc" id="ntp-5" hidden>

  <section>
    <label for="ntp-1" class="head">🌐 Connectivity</label>
    <div class="body">
      <ul>
        <li><a href="https://solveforce.com/%f0%9f%8c%90-broadband-services/">Broadband Services</a></li>
        <li><a href="https://solveforce.com/%f0%9f%93%a1-telecom-services/">Telecom Services</a></li>
        <li><a href="https://solveforce.com/%f0%9f%93%b2-unified-communications-ucaas/">Unified Communications (UCaaS)</a></li>
        <li><a href="https://solveforce.com/%f0%9f%93%b6-wi-fi/">Wi-Fi</a></li>
        <li><a href="https://solveforce.com/%f0%9f%9b%b0%ef%b8%8f-satellite-internet/">Satellite</a></li>
      </ul>
    </div>
  </section>

  <section>
    <label for="ntp-2" class="head">☁️ Cloud</label>
    <div class="body">
      <ul>
        <li><a href="https://solveforce.com/%e2%98%81%ef%b8%8f-adaptive-cloud-services/">Adaptive Cloud Services</a></li>
        <li><a href="https://solveforce.com/%e2%98%81%ef%b8%8f-cloud-computing/">Cloud Computing</a></li>
        <li><a href="https://solveforce.com/%f0%9f%8f%a2-data-centers/">Data Centers</a></li>
        <li><a href="https://solveforce.com/%f0%9f%96%a7-managed-it-services/">Managed IT Services</a></li>
      </ul>
    </div>
  </section>

  <section>
    <label for="ntp-3" class="head">🛡️ Security</label>
    <div class="body">
      <ul><li><a href="https://solveforce.com/%f0%9f%9b%a1%ef%b8%8f-cybersecurity-solutions/">Cybersecurity Solutions</a></li></ul>
    </div>
  </section>

  <section>
    <label for="ntp-4" class="head">🖥️ IT &amp; Operations</label>
    <div class="body">
      <ul>
        <li><a href="https://solveforce.com/%f0%9f%96%a7-managed-it-services/">Managed IT Services</a></li>
        <li><a href="https://solveforce.com/%f0%9f%93%a1-telecom-services/">Telecom Services</a></li>
      </ul>
    </div>
  </section>

  <section>
    <label for="ntp-5" class="head">🌍 Edge &amp; IoT</label>
    <div class="body">
      <ul>
        <li><a href="https://solveforce.com/%f0%9f%8c%8d-internet-of-things-iot/">Internet of Things (IoT)</a></li>
        <li><a href="https://solveforce.com/%f0%9f%8c%8d-edge-computing/">Edge Computing</a></li>
      </ul>
    </div>
  </section>

  <p class="dir">
    <a href="https://solveforce.com/%f0%9f%8c%90-solveforce-service-directory/">🌐 Browse the full SolveForce Service Directory</a>
  </p>
</div>

<style>
  .ntp-accordion-one { max-width:900px; margin:0 auto; }
  .ntp-accordion-one section { border:1px solid #e3e6ea; border-radius:12px; background:#fff; margin:10px 0; overflow:hidden; }
  .ntp-accordion-one .head { display:block; padding:14px 48px 14px 16px; font-weight:700; cursor:pointer; position:relative; user-select:none; }
  .ntp-accordion-one .head::after { content:"+"; position:absolute; right:16px; top:50%; transform:translateY(-50%); font-weight:800; }
  .ntp-accordion-one .body { display:none; padding:0 16px 14px 16px; }
  .ntp-accordion-one .body ul { margin:10px 0 0 0; padding-left:18px; }
  .ntp-accordion-one a { text-decoration:none; border-bottom:1px dashed transparent; }
  .ntp-accordion-one a:hover { border-color:rgba(10,88,202,.35); }

  /* Single-open logic (tie radio # to section index) */
  .ntp-accordion-one > input#ntp-1:checked ~ section:nth-of-type(1) .body,
  .ntp-accordion-one > input#ntp-2:checked ~ section:nth-of-type(2) .body,
  .ntp-accordion-one > input#ntp-3:checked ~ section:nth-of-type(3) .body,
  .ntp-accordion-one > input#ntp-4:checked ~ section:nth-of-type(4) .body,
  .ntp-accordion-one > input#ntp-5:checked ~ section:nth-of-type(5) .body { display:block; }

  .ntp-accordion-one > input#ntp-1:checked ~ section:nth-of-type(1) .head::after,
  .ntp-accordion-one > input#ntp-2:checked ~ section:nth-of-type(2) .head::after,
  .ntp-accordion-one > input#ntp-3:checked ~ section:nth-of-type(3) .head::after,
  .ntp-accordion-one > input#ntp-4:checked ~ section:nth-of-type(4) .head::after,
  .ntp-accordion-one > input#ntp-5:checked ~ section:nth-of-type(5) .head::after { content:"–"; }
  .ntp-accordion-one .dir { text-align:center; margin:16px 0 0; font-weight:700; }
</style>

Notes for pages like the Edge/MSN New Tab

  • No inline JS: both snippets are 100% HTML+CSS, so they respect CSP and Trusted Types.
  • No external assets (fonts/images) to avoid additional policy blocks.
  • If you need exact dark/light theme matching, I can tune the CSS tokens to the host page’s palette—just tell me the selector you inject into (or paste a small DOM snippet of the host container).