Just paste this whole block into a Gamma “Code/Embed” block (or any HTML spot):
<!-- SolveForce Catalog — CSS-only one-at-a-time accordion (Gamma-safe) -->
<div id="sf-acc">
<!-- Controls (radio = one-at-a-time) -->
<input type="radio" name="sf-acc" id="sf-acc-1" checked hidden>
<input type="radio" name="sf-acc" id="sf-acc-2" hidden>
<input type="radio" name="sf-acc" id="sf-acc-3" hidden>
<input type="radio" name="sf-acc" id="sf-acc-4" hidden>
<input type="radio" name="sf-acc" id="sf-acc-5" hidden>
<!-- Item 1 -->
<section class="sf-item">
<label class="sf-head" for="sf-acc-1">🌐 Connectivity</label>
<div class="sf-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>
<!-- Item 2 -->
<section class="sf-item">
<label class="sf-head" for="sf-acc-2">☁️ Cloud</label>
<div class="sf-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>
<!-- Item 3 -->
<section class="sf-item">
<label class="sf-head" for="sf-acc-3">🛡️ Security</label>
<div class="sf-body">
<ul>
<li><a href="https://solveforce.com/%f0%9f%9b%a1%ef%b8%8f-cybersecurity-solutions/">Cybersecurity Solutions</a></li>
</ul>
</div>
</section>
<!-- Item 4 -->
<section class="sf-item">
<label class="sf-head" for="sf-acc-4">🖥️ IT & Operations</label>
<div class="sf-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>
<!-- Item 5 -->
<section class="sf-item">
<label class="sf-head" for="sf-acc-5">🌍 Edge & IoT</label>
<div class="sf-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>
<!-- Global link -->
<p class="sf-dir">
<a href="https://solveforce.com/%f0%9f%8c%90-solveforce-service-directory/">🌐 Browse the full SolveForce Service Directory</a>
</p>
</div>
<style>
/* Container */
#sf-acc { max-width: 900px; margin: 0 auto; }
/* Items */
#sf-acc .sf-item {
border: 1px solid #e3e6ea;
border-radius: 12px;
overflow: hidden;
margin: 10px 0;
transition: border-color .2s ease;
background: #fff;
}
#sf-acc .sf-item:hover { border-color: #cbd3dc; }
/* Headers */
#sf-acc .sf-head {
display: block;
padding: 14px 48px 14px 16px;
font-weight: 700;
cursor: pointer;
position: relative;
user-select: none;
}
#sf-acc .sf-head::after {
content: "+";
position: absolute;
right: 16px;
top: 50%;
transform: translateY(-50%);
font-weight: 800;
}
/* Bodies (closed by default) */
#sf-acc .sf-body {
display: none;
padding: 0 16px 14px 16px;
animation: sf-fade .2s ease;
}
#sf-acc .sf-body ul { margin: 10px 0 0 0; padding-left: 18px; }
#sf-acc .sf-body a {
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: color .2s ease, border-color .2s ease;
}
#sf-acc .sf-body a:hover {
color: #0a58ca;
border-color: rgba(10,88,202,.35);
}
/* Single-open mechanics (radio inputs) */
#sf-acc > input#sf-acc-1:checked ~ .sf-item:nth-of-type(1) .sf-body,
#sf-acc > input#sf-acc-2:checked ~ .sf-item:nth-of-type(2) .sf-body,
#sf-acc > input#sf-acc-3:checked ~ .sf-item:nth-of-type(3) .sf-body,
#sf-acc > input#sf-acc-4:checked ~ .sf-item:nth-of-type(4) .sf-body,
#sf-acc > input#sf-acc-5:checked ~ .sf-item:nth-of-type(5) .sf-body { display: block; }
#sf-acc > input#sf-acc-1:checked ~ .sf-item:nth-of-type(1) .sf-head::after,
#sf-acc > input#sf-acc-2:checked ~ .sf-item:nth-of-type(2) .sf-head::after,
#sf-acc > input#sf-acc-3:checked ~ .sf-item:nth-of-type(3) .sf-head::after,
#sf-acc > input#sf-acc-4:checked ~ .sf-item:nth-of-type(4) .sf-head::after,
#sf-acc > input#sf-acc-5:checked ~ .sf-item:nth-of-type(5) .sf-head::after { content: "–"; }
/* Directory link */
#sf-acc .sf-dir { text-align: center; margin: 18px 0 0; }
#sf-acc .sf-dir a { font-weight: 700; text-decoration: none; }
/* Micro animation */
@keyframes sf-fade {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
</style>
Notes
- Single-open is enforced by the shared radio
name="sf-acc"; clicking a header (label) switches the checked radio. - First section is auto-open via
checkedon#sf-acc-1. - Works in Gamma, WordPress, or anywhere without JS. If you want more clusters, copy an
<input>(increment the id) +<section>pair and extend the two CSS selector lines with#sf-acc-6, etc.
Want me to output a version that matches your GeneratePress colors/typography exactly?
SolveForce Catalog — CSS-only one-at-a-time accordion (Gamma-safe) – SolveForce Communications