diff options
Diffstat (limited to 'source/blog/2022/website-adventures-basics')
| -rw-r--r-- | source/blog/2022/website-adventures-basics/index.md | 39 |
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. |