Format collapses
This commit is contained in:
parent
57504cd610
commit
f207a67a96
4 changed files with 5 additions and 12 deletions
|
@ -8,13 +8,10 @@
|
||||||
<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"><tag</label>
|
<label class="open-tag" for="collapse" aria-label="tag"><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"></tag></label>
|
||||||
</div>
|
|
||||||
<label for="collapse" class="close-tag"></tag></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>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -8,12 +8,9 @@
|
||||||
<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>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -6,7 +6,6 @@
|
||||||
.collapse-content {
|
.collapse-content {
|
||||||
padding: 5px;
|
padding: 5px;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
label {
|
label {
|
||||||
|
|
Loading…
Reference in a new issue