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
Key terms in plain language
Open a term for a concise explanation of language used on this page.
Broadband
A general term for always-on, high-speed Internet access. Broadband can be delivered over fiber, cable, DSL, fixed wireless, cellular, or satellite networks.
Unified Communications (UCaaS)
A cloud-based combination of business calling, messaging, meetings, presence, and collaboration tools managed as one communications service.
Cloud Computing
Computing resources—such as applications, servers, storage, or databases—delivered from remote infrastructure and scaled as requirements change.
Cybersecurity
The practices and controls used to protect identities, devices, networks, applications, and data from unauthorized access, disruption, or manipulation.
Infrastructure as a Service (IaaS)
Cloud-based servers, storage, and networking that customers configure and manage without owning the underlying data-center hardware.
Software as a Service (SaaS)
Software accessed as an online service instead of being installed and maintained entirely on the customer’s own computers or servers.