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">
|
||||
<input type="checkbox" id="collapse" />
|
||||
<label class="open-tag" for="collapse" aria-label="tag"><tag</label>
|
||||
<div class="collapse-content">
|
||||
This is the inner content
|
||||
</div>
|
||||
<label for="collapse" class="close-tag"></tag></div>
|
||||
<div class="collapse-content">This is the inner content</div>
|
||||
<label for="collapse" class="close-tag"></tag></label>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Text below the collapse, which should move out the way</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -4,7 +4,6 @@
|
|||
.collapse-content {
|
||||
margin: 0.5rem;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
|
@ -23,7 +22,8 @@
|
|||
}
|
||||
|
||||
input[type="checkbox"]:not(:checked) {
|
||||
~ .collapse-content, ~ .close-tag {
|
||||
~ .collapse-content,
|
||||
~ .close-tag {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
@ -8,12 +8,9 @@
|
|||
<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 class="collapse-content">This is the inner content</div>
|
||||
</div>
|
||||
|
||||
|
||||
<p>Text below the collapse, which should move out the way</p>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -6,7 +6,6 @@
|
|||
.collapse-content {
|
||||
padding: 5px;
|
||||
overflow: hidden;
|
||||
|
||||
}
|
||||
|
||||
label {
|
||||
|
|
Loading…
Reference in a new issue