CamBuildr landing pages are structured in rows, which you can selectively hide and reveal to keep your page compact and interactive. This technique is especially useful when you want to offer expandable sections—such as a full agenda or additional background information—without overwhelming the user upfront.
This article shows you how to toggle the visibility of specific rows using a small amount of CSS and JavaScript.
Overview: How Collapsible Rows Work
Using this setup, a user can click a heading, button, or link to expand hidden rows. These rows smoothly slide open and closed with a transition effect.
Important notes before starting:
Row numbers (e.g., .bee-row-10) can only be found in the source code, not in the visual editor. Rows do not have IDs, so you must refer to them using their generated class names, like .bee-row-10, .bee-row-11, etc.
The best way to find our your rows number is by looking it up in the source code. Use your browser’s developer tools to inspect this source code.
1. Add a Toggle Element
Insert an HTML block above the rows you want to collapse.
Add a simple clickable element to serve as the toggle:
<h3 id="programmtoggle">Show/Hide Program</h3>
You can use a <button>, <div>, or <a> tag instead—just make sure it has the id="programmtoggle" so the script can find it. Alternatively you can use a Button and assign it with the ID.
2. Insert Custom CSS and JavaScript
In the same HTML block or a dedicated HTML block, paste the following code:
<style>
/* Style the toggle button */
#programmtoggle {
cursor: pointer;
}
/* Initially hide rows 10 to 14 with zero height and opacity */
.bee-row-10,
.bee-row-11,
.bee-row-12,
.bee-row-13,
.bee-row-14 {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: max-height 0.5s ease, opacity 0.5s ease;
}
/* Class to show the rows with full height and visible opacity */
.bee-row-visible {
opacity: 1;
}
</style>
<script>
// Wait for the page to fully load
window.onload = function() {
// Get the toggle element by its ID
var button = document.getElementById("programmtoggle");
// Assign the click event
button.onclick = function() {
toggleAccordion1();
};
};
function toggleAccordion1() {
// Select rows 10 to 14 using their class names
var rows = document.querySelectorAll(".bee-row-10, .bee-row-11, .bee-row-12, .bee-row-13, .bee-row-14");
// Toggle visibility for each row
rows.forEach(function(row) {
if (!row.classList.contains("bee-row-visible")) {
row.style.maxHeight = row.scrollHeight + "px";
row.classList.add("bee-row-visible");
} else {
row.style.maxHeight = 0;
row.classList.remove("bee-row-visible");
}
});
}
</script>
You must manually adjust the row numbers in the selector (e.g., .bee-row-10) to match the rows you want to hide.
3. Save and Test
Click Preview and test the toggle.
Check that the rows open and close smoothly.
Make sure that hidden content isn’t breaking the layout.