summaryrefslogtreecommitdiff
path: root/source/blog
diff options
context:
space:
mode:
Diffstat (limited to 'source/blog')
-rw-r--r--source/blog/2022/website-adventures-basics/index.md39
1 files changed, 22 insertions, 17 deletions
diff --git a/source/blog/2022/website-adventures-basics/index.md b/source/blog/2022/website-adventures-basics/index.md
index 02aebef..afcf19b 100644
--- a/source/blog/2022/website-adventures-basics/index.md
+++ b/source/blog/2022/website-adventures-basics/index.md
@@ -5,7 +5,7 @@ layout: "blog"
toc: true
---
-Published on 2022-11-20, last updated on 2023-02-27.
+Published on 2022-11-20, last updated on 2023-05-19.
Making and managing this personal website has been an adventure.
In this series, I go over the technical challenges I've encountered
@@ -310,13 +310,16 @@ and they're also smelly! Take that!</em>
So... time for JS? Well, fortunately, there's another way,
using just old-school HTML and CSS:
-<div class="proof">
-<input type="checkbox" class="proof" id="proof-example"/>
-<label class="proof" for="proof-example">Click to show (IE welcome too)</label>
-<div class="proof-hidden">
-<label class="proof" for="proof-example">Click to hide.</label>
+<div class="collapse proof">
+<input type="checkbox" class="collapse-toggle" id="collapse-example"/>
+<label for="collapse-example">Click to show (IE welcome too)</label>
+<div class="collapse-hidden">
+<div class="collapse-starts"></div>
+<p>
+<label for="collapse-example">Click to hide.</label>
<br>
<em>This is a safe space where users of all browsers can rejoice together in peace.</em>
+</p>
</div>
</div>
@@ -324,15 +327,15 @@ Pretty cool eh? This box is structured as follows,
using only `<div>`, `<input>` and `<label>`:
```html
{% raw %}<!-- Wrapper for applying CSS to the entire collapsible object -->
-<div class="collapsible">
+<div class="collapse">
<!-- (Invisible) checkbox that controls the content's visibility -->
-<input type="checkbox" class="collapsible" id="my-example"/>
+<input type="checkbox" class="collapse-toggle" id="my-example"/>
<!-- (Visible) text label standing in for the checkbox -->
-<label class="collapsible" for="my-example">Click to show</label>
+<label for="my-example">Click to show</label>
<!-- Wrapper for what should be hidden when the checkbox isn't checked -->
-<div class="collapsible-hidden">
+<div class="collapse-hidden">
<!-- Replacement text label for when the content is being shown -->
-<label class="collapsible" for="my-example">Click to hide</label>{% endraw %}
+<label for="my-example">Click to hide</label>{% endraw %}
<!-- The actual content that we want to show/hide -->
...
</div>
@@ -343,16 +346,18 @@ And then the magic happens in CSS, where `x + y` means
then apply this rule to the `<y>` element":
```css
/* Hide the content by default */
-.collapsible-hidden {display: none;}
+.collapse-hidden {display: none;}
/* Make the checkbox invisible */
-input.collapsible {display: none;}
+.collapse-toggle {display: none;}
/* If it's checked, then show the content... */
-input.collapsible:checked + label + .collapsible-hidden {display: block;}
+.collapse-toggle:checked + label + .collapse-hidden {display: block;}
/* ... and hide the original text label */
-input.collapsible:checked + label {display: none;}
+.collapse-toggle:checked + label {display: none;}
```
-Compared to `<details>`, this even gives some extra flexibility.
+Compared to `<details>`, this even gives some extra flexibility!
For an example of a page using this technique,
click [here](/know/concept/boltzmann-equation/) and scroll down.
-
+If you look at the source, you'll see that my HTML and CSS
+are a bit more complicated than described above,
+but it's still the same trick.