// 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 }); } }
top of page
bottom of page