<div class="fold-wrapper" id="fold-wrapper">
<!-- Top Panel (Remains static) -->
<div class="fold-panel panel-top">
<h3>Headquarters</h3>
<p>San Francisco, CA</p>
<button class="expand-btn" id="expand-btn">View Details ↓</button>
</div>
<!-- Middle Panel (Hinges from the Top) -->
<div class="fold-panel panel-mid">
<div class="mid-content">
<img src="https://placehold.co/300x120/1e293b/38bdf8?text=Map+View" alt="Map" class="map-img">
</div>
<!-- Bottom Panel (Hinges from the Middle) -->
<div class="fold-panel panel-bottom">
<div class="bottom-content">
<p>123 Innovation Drive<br>Suite 400<br>Contact: (555) 123-4567</p>
</div>
</div>
</div>
</div>
*, *::before, *::after {
box-sizing: border-box;
}
body {
font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
margin: 0;
background: #f1f5f9;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.fold-wrapper {
perspective: 1200px;
width: 300px;
cursor: pointer;
}
.fold-panel {
width: 100%;
background: #ffffff;
transform-style: preserve-3d;
}
.panel-top {
position: relative;
z-index: 3;
padding: 30px 20px;
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
}
.panel-top h3 {
margin: 0 0 5px 0;
color: #0f172a;
}
.panel-top p {
margin: 0 0 20px 0;
color: #64748b;
}
.expand-btn {
background: #f1f5f9;
border: none;
padding: 8px 16px;
border-radius: 20px;
font-weight: 600;
color: #3b82f6;
cursor: pointer;
}
.panel-mid {
position: relative;
transform-origin: top center;
transform: rotateX(-110deg);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
/* Make the back invisible cleanly */
backface-visibility: hidden;
background: #f8fafc;
}
.mid-content {
padding: 10px;
border-left: 1px solid #e2e8f0;
border-right: 1px solid #e2e8f0;
}
.map-img {
width: 100%;
border-radius: 8px;
display: block;
}
.panel-bottom {
position: absolute;
top: 100%;
left: 0;
transform-origin: top center;
transform: rotateX(100deg);
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
backface-visibility: hidden;
border-radius: 0 0 16px 16px;
box-shadow: 0 20px 30px rgba(0, 0, 0, 0.15);
border: 1px solid #e2e8f0;
border-top: none;
}
.bottom-content {
padding: 20px;
color: #334155;
line-height: 1.6;
text-align: center;
font-size: 0.95rem;
}
/* Safely apply opened states via parent class */
.fold-wrapper.is-open .panel-mid {
transform: rotateX(0deg);
}
.fold-wrapper.is-open .panel-bottom {
transform: rotateX(0deg);
}
const wrapper = document.getElementById("fold-wrapper");
wrapper.addEventListener("click", function() {
wrapper.classList.toggle("is-open");
const btn = document.getElementById("expand-btn");
if (wrapper.classList.contains("is-open")) {
btn.innerText = "Close ↑";
} else {
btn.innerText = "View Details ↓";
}
});
