lab/website-components
1
Fork 0
Code Activity

Add code collapse

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

20
src/code-collapse/index.html Normal file
View file

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

34
src/code-collapse/index.scss Normal file
View file

@ -0,0 +1,34 @@
@import "normalize.css";
.code-collapse-wrapper {
.collapse-content {
margin: 0.5rem;
overflow: hidden;
}
label {
cursor: pointer;
width: 100%;
display: block;
user-select: none;
&.open-tag::after {
content: ">";
}
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:not(:checked) {
~ .collapse-content, ~ .close-tag {
display: none;
}
~ label.open-tag::after {
content: "/>";
}
}
}