Question:
How do I adapt the HTML element size based on the dynamic content of the HTML code inside?
Product:
Wix Studio
What are you trying to achieve:
I am creating via HTML an accordion menu. I would the page and the elements adapt once I click to open the accordion and show the content inside. Now when I click the accord meno there is no adaptation and the content is the visualized “cut”.
What have you already tried:
This is the HTML of my accordion:
<div class="accordion-container">
<!-- Accordion 1 -->
<div class="accordion">
<div class="accordion-header">
<span class="package-name">Weekend Escape</span>
<span class="icon">˅</span>
</div>
<div class="accordion-content">
<h3>Weekend Escape</h3>
<p><strong>Price:</strong> €250 per night</p>
<ul>
<li>Welcome drink on arrival</li>
<li>Daily breakfast for two</li>
<li>Access to the wellness spa</li>
<li>Late checkout (subject to availability)</li>
</ul>
</div>
</div>
<!-- Accordion 2 -->
<div class="accordion">
<div class="accordion-header">
<span class="package-name">Luxury Retreat</span>
<span class="icon">˅</span>
</div>
<div class="accordion-content">
<h3>Luxury Retreat</h3>
<p><strong>Price:</strong> €450 per night</p>
<ul>
<li>Private suite with a sea view</li>
<li>Gourmet dinner for two</li>
<li>Complimentary bottle of champagne</li>
<li>24/7 concierge service</li>
</ul>
</div>
</div>
</div>
<style>
/* Import Cormorant Garamond Semi Bold */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@600&display=swap');
.accordion-container {
margin: 0 auto;
width: 90%;
max-width: 600px;
}
.accordion {
border: 1px solid #E1D1B6;
border-radius: 8px;
margin-bottom: 16px;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.accordion-header {
background-color: white;
color: #E1D1B6;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 18px;
padding: 12px 16px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
border-bottom: 1px solid #E1D1B6;
}
.accordion-header.active {
background-color: rgba(225, 209, 182, 0.2);
}
.accordion-content {
background-color: white;
padding: 0 16px;
max-height: 0;
overflow: hidden;
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
font-size: 16px;
color: black;
transition: max-height 0.3s ease, padding 0.3s ease;
}
.accordion-content h3 {
font-size: 18px;
color: #E1D1B6;
margin: 16px 0 8px 0;
}
.accordion-content ul {
list-style-type: circle;
padding-left: 20px;
color: #E1D1B6;
}
.accordion-content ul li {
margin-bottom: 8px;
}
.accordion-content strong {
color: #E1D1B6;
}
.icon {
transition: transform 0.3s ease;
}
.accordion-header.active .icon {
transform: rotate(180deg);
}
</style>
<script>
// Function to send the updated height to Wix parent
function updateHeight() {
const height = document.documentElement.scrollHeight;
window.parent.postMessage({ type: 'resize', height: height }, '*');
}
document.addEventListener("DOMContentLoaded", () => {
// Initial height post
updateHeight();
// Select all accordion headers
const headers = document.querySelectorAll(".accordion-header");
headers.forEach(header => {
header.addEventListener("click", () => {
const accordionContent = header.nextElementSibling;
const icon = header.querySelector(".icon");
// Toggle active state for the header
header.classList.toggle("active");
// Toggle max-height for smooth height transition
if (header.classList.contains("active")) {
accordionContent.style.maxHeight = accordionContent.scrollHeight + "px";
accordionContent.style.padding = "16px";
icon.style.transform = "rotate(180deg)";
} else {
accordionContent.style.maxHeight = "0";
accordionContent.style.padding = "0 16px";
icon.style.transform = "rotate(0deg)";
}
// Post the updated height after content toggles
setTimeout(updateHeight, 300); // Delay to allow transition
});
});
});
// Recalculate height when the window is resized
window.addEventListener("resize", updateHeight);
</script>
Additional information:
HTML element option is set to “Scale size proportionally”