1) Add the accordion markup (with your SolveForce sector links)
Put this anywhere in the page content where you want the catalog to appear. If you already have a clusters block, just wrap it in the wrapper <div id="sf-accordion"> and make sure each cluster uses <details> / <summary>.
<!-- SolveForce Catalog (Accordion) -->
<div id="sf-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 & 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 & 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>
</div>
You can add/rename clusters freely—just keep the
<details>structure.
2) Make it “one-at-a-time” (tiny JS)
Add this at the very bottom of the page in a Custom HTML block, or via a snippet plugin (frontend footer). It keeps only one <details> open at a time and preserves your auto-open on the first item.
<script>
document.addEventListener('DOMContentLoaded', function () {
var wrap = document.getElementById('sf-accordion');
if (!wrap) return;
var items = Array.prototype.slice.call(wrap.querySelectorAll('details'));
items.forEach(function (d) {
d.addEventListener('toggle', function () {
if (!d.open) return;
items.forEach(function (other) {
if (other !== d && other.open) other.open = false;
});
});
});
});
</script>
3) Lightweight CSS (add to Appearance → Customize → Additional CSS)
Smooth open/close, borders, hover states, plus a nice +/- indicator. (No library required.)
/* SolveForce accordion styles */
#sf-accordion details {
border: 1px solid #e3e6ea;
border-radius: 10px;
margin: 10px 0;
overflow: hidden; /* keeps rounded corners */
transition: border-color .2s ease;
}
#sf-accordion details:hover {
border-color: #cbd3dc;
}
#sf-accordion summary {
cursor: pointer;
list-style: none;
padding: 12px 44px 12px 14px; /* room for icon on right */
font-weight: 600;
position: relative;
user-select: none;
}
#sf-accordion summary::-webkit-details-marker { display: none; }
#sf-accordion summary::after {
content: "+";
position: absolute;
right: 14px;
top: 50%;
transform: translateY(-50%);
font-weight: 700;
}
#sf-accordion details[open] summary::after { content: "–"; }
#sf-accordion details > *:not(summary) {
padding: 0 14px 12px 14px;
}
#sf-accordion ul {
margin: 10px 0 0 0;
padding: 0 0 0 16px;
}
#sf-accordion a {
text-decoration: none;
border-bottom: 1px dashed transparent;
transition: color .2s ease, border-color .2s ease;
}
#sf-accordion a:hover {
color: #0a58ca; /* theme-ish blue */
border-color: rgba(10,88,202,.35);
}
4) Add the Service Directory link at the bottom of every page
Since you asked to include this on every page, the most maintainable options are:
- Reusable block (Gutenberg): create a small block and insert it into pages, or
- Theme hook (GeneratePress): add the HTML to a Hook Element (e.g.,
generate_after_content) with display rules “Entire Site”.
Here’s the snippet either way:
<p style="text-align:center;margin:24px 0 0;">
<a href="https://solveforce.com/%f0%9f%8c%90-solveforce-service-directory/">
🌐 Browse the full SolveForce Service Directory
</a>
</p>
Quick checklist
- Wrapped your clusters in
<div id="sf-accordion"> ... </div> - Each cluster uses
<details><summary>Title</summary>…</details> - JS snippet added at the bottom of the page (or enqueued in footer)
- CSS pasted into Additional CSS
- Directory link added site-wide via Reusable block or GP Hook
Want me to convert any of your existing Service pages into this accordion structure automatically (keeping your current links)?
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.