26 CSS Accordions — Vertical & Horizontal 22 / 26
Paper Folded
Each row looks like a folded paper card; opening unfolds it with a 3D rotateX flip.
The code
<details class="acc-fold" name="acc-fold" open> <summary>Origami</summary> <p>The art of folding paper into expressive form. Single sheet, no cuts, no glue.</p> </details> <details class="acc-fold" name="acc-fold"> <summary>Letterpress</summary> <p>Type pressed into thick cotton stock leaves a tactile bite that catches light.</p> </details> <details class="acc-fold" name="acc-fold"> <summary>Saddle Stitch</summary> <p>Two staples through the fold of a folio. Quick, cheap, beautiful for short runs.</p> </details>
<details class="acc-fold" name="acc-fold" open>
<summary>Origami</summary>
<p>The art of folding paper into expressive form. Single sheet, no cuts, no glue.</p>
</details>
<details class="acc-fold" name="acc-fold">
<summary>Letterpress</summary>
<p>Type pressed into thick cotton stock leaves a tactile bite that catches light.</p>
</details>
<details class="acc-fold" name="acc-fold">
<summary>Saddle Stitch</summary>
<p>Two staples through the fold of a folio. Quick, cheap, beautiful for short runs.</p>
</details>.acc-fold {
background: linear-gradient(180deg, #f0eeff, #e6e2f5);
color: #15151d; margin-bottom: 8px;
border: 1px solid rgba(21,21,29,0.12);
perspective: 800px; transform-style: preserve-3d;
}
.acc-fold summary {
cursor: pointer; list-style: none; padding: 13px 16px;
font: 700 13px/1 system-ui; position: relative;
border-bottom: 1px solid transparent;
transform-origin: bottom; transition: border-color .25s;
}
.acc-fold summary::-webkit-details-marker { display: none; }
.acc-fold summary::after {
content: '▾'; position: absolute; right: 16px; top: 50%;
transform: translateY(-50%); color: #9c7bd6;
transition: transform .35s;
}
.acc-fold p {
margin: 0; padding: 14px 16px;
font: 12px/1.6 system-ui;
background: linear-gradient(180deg, #faf8ff, #ece8f5);
transform-origin: top; transform: rotateX(-90deg);
transition: transform .45s cubic-bezier(.3,1,.3,1);
box-shadow: inset 0 1px 0 rgba(21,21,29,0.08);
}
.acc-fold[open] summary { border-bottom-color: rgba(21,21,29,0.12); }
.acc-fold[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.acc-fold[open] p { transform: rotateX(0); } .acc-fold {
background: linear-gradient(180deg, #f0eeff, #e6e2f5);
color: #15151d; margin-bottom: 8px;
border: 1px solid rgba(21,21,29,0.12);
perspective: 800px; transform-style: preserve-3d;
}
.acc-fold summary {
cursor: pointer; list-style: none; padding: 13px 16px;
font: 700 13px/1 system-ui; position: relative;
border-bottom: 1px solid transparent;
transform-origin: bottom; transition: border-color .25s;
}
.acc-fold summary::-webkit-details-marker { display: none; }
.acc-fold summary::after {
content: '▾'; position: absolute; right: 16px; top: 50%;
transform: translateY(-50%); color: #9c7bd6;
transition: transform .35s;
}
.acc-fold p {
margin: 0; padding: 14px 16px;
font: 12px/1.6 system-ui;
background: linear-gradient(180deg, #faf8ff, #ece8f5);
transform-origin: top; transform: rotateX(-90deg);
transition: transform .45s cubic-bezier(.3,1,.3,1);
box-shadow: inset 0 1px 0 rgba(21,21,29,0.08);
}
.acc-fold[open] summary { border-bottom-color: rgba(21,21,29,0.12); }
.acc-fold[open] summary::after { transform: translateY(-50%) rotate(180deg); }
.acc-fold[open] p { transform: rotateX(0); }More from 26 CSS Accordions — Vertical & Horizontal
Stacked CardsHolographic SlotAurora DriftUnderline RevealNumbered StepsPlus / Minus MorphChevron RotateBrutalist StampGlass FrostedMinimal RailCard LiftStrip Tabs
View the full collection →