lab/website-components
1
Fork 0
Code Activity

Add collapse element

Browse source
This commit is contained in:
Jake Howard 2024-08-12 22:18:40 +01:00
parent b635908eb4
commit a35be7c4d6
Signed by: jake
GPG key ID: 57AFB45680EDD477
2 changed files with 47 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

19
src/collapse/index.html Normal file
View file

@ -0,0 +1,19 @@
<html>
<head>
<link rel="stylesheet" href="./index.scss" />
</head>
<body>
<p>Here's some content before</p>
<div class="collapse-wrapper">
<label for="collapse">Check</label>
<input type="checkbox" id="collapse" />
<div class="collapse-content">
This is the inner content
</div>
</div>
<p>Text below the collapse, which should move out the way</p>
</body>
</html>

28
src/collapse/index.scss Normal file
View file

@ -0,0 +1,28 @@
@import "normalize.css";
.collapse-wrapper {
background: red;
.collapse-content {
padding: 5px;
overflow: hidden;
}
label {
cursor: pointer;
width: 100%;
display: block;
background-color: orange;
padding: 5px;
user-select: none;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:not(:checked) + .collapse-content {
display: none;
}
}