Handmade Retro-Inspired Unfolding List / Only 10Kb Of Code, Less Than 310 Lines Of Text
Handmade retro-inspired unfolding list, code will be integrated to the website template for later reuse.
Feature: hidden text in the unfolded menu is protected from being selected and copied.
Not vibe-coded sh#t, mobile compatible, but who really cares?
SOURCE CODE
MARKUP: HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unfolding testbed</title>
</head>
<body>
<div class="text-catalog">
<div class="text-tablesheet">
<button class="accordion">Unfold 1</button>
<div class="text-panel">
<button class="accordion__item"> <span class="title">Text 1</span>
<div class="text-panel"> </div>
<div class="text-box">
<p class="text-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus, ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus. </p>
<br>
<ul class="panel-list">
<li>Demo list text for demonstration stuff</li>
<li>Another one must fall on the life arena</li>
<li>You can't stop us, raf-raf-</li>
<li>Unzip me gently for some reason</li>
</ul>
<img class="robo" src="robot.png">
</div>
</button>
</div>
<button class="accordion">Unfold 2</button>
<div class="text-panel">
<button class="accordion__item"><span class="title">Text 2</span>
<div class="text-panel"> </div>
<div class="text-box">
<p class="text-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus, ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus.</p>
<ul class="panel-list">
<li>Demo list text for demonstration stuff</li>
<li>Another one must fall on the life arena</li>
<li>You can't stop us, raf-raf-</li>
<li>Unzip me gently for some reason</li>
</ul>
<img class="robo" src="robot.png">
</div>
</div>
<button class="accordion">Unfold 3</button>
<div class="text-panel">
<button class="accordion__item"><span class="title">Text 3</span>
<div class="text-panel"> </div>
<div class="text-box">
<p class="text-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus, ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus.</p>
<ul class="panel-list">
<li>Demo list text for demonstration stuff</li>
<li>Another one must fall on the life arena</li>
<li>You can't stop us, raf-raf-</li>
<li>Unzip me gently for some reason</li>
</ul>
<img class="robo" src="robot.png">
</div>
</div>
<button class="accordion">Unfold 4</button>
<div class="text-panel">
<button class="accordion__item"><span class="title">Text 4</span>
<div class="text-panel"> </div>
<div class="text-box">
<p class="text-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus, ipsum dolor sit amet consectetur, adipisicing elit. Mollitia aperiam
repellendus.</p>
<ul class="panel-list">
<li>Demo list text for demonstration stuff</li>
<li>Another one must fall on the life arena</li>
<li>You can't stop us, raf-raf-</li>
<li>Unzip me gently for some reason</li>
</ul>
<img class="robo" src="robot.png">
</div>
</div>
</div>
</div>
</body>
STYLES: CSS/SCSS
@font-face {
font-family: "amiga";
src: url("amiga.ttf");
}
body {
font-family: "amiga";
background: #000000;
color: #ffffff;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.text-catalog {
color: #ffffff;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
width: 90%;
max-width: 700px;
margin: 40px auto;
padding: 0 15px;
}
.text-tablesheet {
display: flex;
flex-direction: column;
gap: 1px;
justify-content: center;
}
.accordion {
background-color: #f0f3f8;
font-family: "amiga";
color: #003687;
font-weight: bold;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
position: relative;
overflow: hidden;
z-index: 1;
padding: 13px 30px;
border-radius: 7px;
transition: 0.4s;
outline: none;
border: none;
font-size: 20px;
background-image: linear-gradient(to right top, #d16ba5, #c777b9, #ba83ca, #aa8fd8, #9a9ae1, #8aa7ec, #79b3f4, #69bff8, #52cffe, #41dfff, #46eefa, #5ffbf1);
transition: all 0.5s ease-in-out;
}
.accordion::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
background-image: linear-gradient(to left top, #f215ac, #ff3d6a, #ff7a35, #dcaa20, #abce50, #83db79, #54e4a5, #00ead0, #00e3e1, #00dbee, #00d2f7, #25c8fa);
transform: translateX(-100%);
filter: blur(28px);
opacity: 0;
transition: all 0.5s ease-in-out;
}
.accordion::after {
content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='4.5' y='1' width='4' height='10' fill='%23003687'/%3E%3Crect x='1' y='4' width='11' height='3' fill='%23003687'/%3E%3C/svg%3E");
float: right;
margin-left: 10px;
margin-top: 4px;
transform: rotate(-180deg);
transition: all 0.5s ease-in-out;
}
.active::after {
content: url("data:image/svg+xml,%3Csvg width='13' height='12' viewBox='0 0 13 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1' y='4' width='11' height='4' fill='%23003687'/%3E%3C/svg%3E");
transform: rotate(180deg);
margin-top: 4px;
transition: all 0.5s ease-in-out;
}
.accordion__item {
background-color: #000000;
color: #00ff44;
padding: 18px;
width: 100%;
text-align: left;
border-radius: 7px;
outline: none;
border: none;
transition: 0.4s;
font-size: 20px;
border: 3px white groove;
text-shadow:
2px 0 1px rgba(255, 0, 0, 0.8),
-2px 0 1px rgba(0, 255, 255, 0.8);
}
.active,
.accordion:hover {
transform: scale(101%);
outline: 3px white solid;
transition: all 0.5s ease-in-out;
}
.active::before,
.accordion:hover::before {
transform: translateX(0);
filter: blur(0);
opacity: 1;
}
.panel-list {
margin: 0 auto;
margin-left: 0;
}
.text-box {
display: flex;
align-items: center;
flex-direction: column;
}
.text-panel {
overflow: hidden;
background-color: transparent;
max-height: 0;
opacity: 0;
filter: blur(18px);
transition:
max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1),
opacity 0.5s ease-out,
filter 0.5s ease-out;
will-change: max-height, opacity, filter;
}
.text-panel.is-open {
opacity: 1;
filter: blur(0);
}
.text-paragraph {
font-family: "amiga";
font-size: 16px;
color: white;
font-weight: normal;
margin: 20px 20px 20px 20px;
width: 94%;
text-align: center;
}
.text-paragraph img {
max-width: 100%;
border-radius: 5px;
margin-top: 10px;
}
.robo {
margin-top: 20px;
outline: #00ff00 2px groove;
box-shadow:
12px 0 1px rgba(255, 0, 0, 0.8),
-12px 0 1px rgba(0, 255, 255, 0.8);
}
.title {
display: block;
font-size: 24px;
text-transform: uppercase;
text-align: center;
text-shadow:
4px 0 1px rgba(255, 0, 0, 0.5),
-4px 0 1px rgba(0, 255, 255, 0.5);
}
@media (width <=680px) {
.accordion,
.accordion__item,
.robo {
width: 90%;
margin: 0 auto;
}
.robo {
margin-top: 20px;
}
}
LOGIC: JAVASCRIPT
let acc = document.getElementsByClassName("accordion");
let i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function () {
this.classList.toggle("active");
let panel = this.nextElementSibling;
if (!panel.classList.contains("is-open")) {
const contentHeight = panel.scrollHeight;
panel.style.maxHeight = contentHeight + "px";
panel.classList.add("is-open");
}
else {
panel.style.maxHeight = null;
panel.classList.remove("is-open");
}
});
}
