lab/website-components
1
Fork 0
Code Activity

Format collapses

Browse source
This commit is contained in:
Jake Howard 2024-08-13 23:04:04 +01:00
parent 57504cd610
commit f207a67a96
Signed by: jake
GPG key ID: 57AFB45680EDD477
4 changed files with 5 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/code-collapse/index.html
View file

@ -8,12 +8,9 @@
<div class="code-collapse-wrapper"> <div class="code-collapse-wrapper">
<input type="checkbox" id="collapse" /> <input type="checkbox" id="collapse" />
<label class="open-tag" for="collapse" aria-label="tag">&lt;tag</label> <label class="open-tag" for="collapse" aria-label="tag">&lt;tag</label>
<div class="collapse-content"> <div class="collapse-content">This is the inner content</div>
This is the inner content <label for="collapse" class="close-tag">&lt;/tag&gt;</label>
</div> </div>
<label for="collapse" class="close-tag">&lt;/tag&gt;</div>
</div>
<p>Text below the collapse, which should move out the way</p> <p>Text below the collapse, which should move out the way</p>
</body> </body>

4
src/code-collapse/index.scss
View file

@ -4,7 +4,6 @@
.collapse-content { .collapse-content {
margin: 0.5rem; margin: 0.5rem;
overflow: hidden; overflow: hidden;
} }
label { label {
@ -23,7 +22,8 @@
} }
input[type="checkbox"]:not(:checked) { input[type="checkbox"]:not(:checked) {
~ .collapse-content, ~ .close-tag { ~ .collapse-content,
~ .close-tag {
display: none; display: none;
} }

5
src/collapse/index.html
View file

@ -8,11 +8,8 @@
<div class="collapse-wrapper"> <div class="collapse-wrapper">
<label for="collapse">Check</label> <label for="collapse">Check</label>
<input type="checkbox" id="collapse" /> <input type="checkbox" id="collapse" />
<div class="collapse-content"> <div class="collapse-content">This is the inner content</div>
This is the inner content
</div> </div>
</div>
<p>Text below the collapse, which should move out the way</p> <p>Text below the collapse, which should move out the way</p>
</body> </body>

1
src/collapse/index.scss
View file

@ -6,7 +6,6 @@
.collapse-content { .collapse-content {
padding: 5px; padding: 5px;
overflow: hidden; overflow: hidden;
} }
label { label {