// Place your shed data in an object.
// Replace the image URLs and prices with your actual data.
const shedData = {
"Small": {
image: "https://your-image-link.com/small-shed.jpg",
price: "$100"
},
"Medium": {
image: "https://your-image-link.com/medium-shed.jpg",
price: "$200"
},
"Large": {
image: "https://your-image-link.com/large-shed.jpg",
price: "$300"
}
};
$w.onReady(function () {
// (Optional) Hide the shed details container on page load
$w("#shedDetailsContainer").hide();
// Attach click event handlers for each button.
$w("#smallBtn").onClick(() => {
displayShedDetails("Small");
});
$w("#mediumBtn").onClick(() => {
displayShedDetails("Medium");
});
$w("#largeBtn").onClick(() => {
displayShedDetails("Large");
});
});
/**
* Displays the shed details based on the selected size.
* @param {string} size - The size key ("Small", "Medium", or "Large").
*/
function displayShedDetails(size) {
const shed = shedData[size];
if (shed) {
// Update the image and price elements with the selected shed's details
$w("#shedImage").src = shed.image;
$w("#shedPrice").text = shed.price;
// Show the container if it was hidden
$w("#shedDetailsContainer").show("fade", { duration: 300 });
}
}