Chapter Text
Demonstration
Hello! Have you ever wanted to make hidden-text that shows up when you click a button? Like this:
Inconspicuous Button
Bam! Hidden text goes here. Click the button to hide me again!
Or perhaps a button that changes text depending on if you have it open or not?
Inventory
You could have sworn you had a pumpkin in here, but it seems to have disappeared! 🎃
This one is for my fellow Homestucks, you can make Pesterlogs!
Pesterlog
TT: Jake.
GT: Whats up dirk?
TT: Did that button just change from "Show Pesterlog" to "Hide Pesterlog" when the reader clicked on it?
GT: I think it did, click it again to be sure!
These also work well, since without styling, it serves the same purpose by obscuring the inner text with a clickable label. Without skins, it just appears as a regular dropdown text. See below:
Without CSS
Hide the Creator's Style to see how the rest of the fic looks without styling. (And click here or the button up top to turn the styling back on)
The Buttons
My other tutorial has more detail on how to get started if you're an absolute beginner (see "Getting Started" in Chapter 1), so I will just be giving the summary here. Either create a new workskin if you don't have one already, or if you do have one, add the desired CSS code to your current workskin. Then, select the workskin for the fic you are writing.
The Buttons
We use CSS to create the buttons. Add this to your workskin:
CSS
#workskin .button {
border-radius: 4px;
border: 1px solid #BBBBBB;
margin: 1px auto;
background: linear-gradient(#FFFFFF, #dbdbdb);
box-shadow: inset 0px -1px #c9c9c9;
color: #2a2a2a;
padding: 2px;
list-style: none;
display: block;
text-align: center;
width: fit-content;
cursor: pointer;
}
#workskin .button:hover {
background: grey;
}
This will give us the bare minimum, a button that shows/hides hidden content. For the sake of the tutorial, the code and its results will be colour-coded.
Work Text*
<details>
<summary class="button">
LABEL GOES HERE
</summary>
<p>CONTENTS GO HERE.</p>
</details>
And that will work to create this button:
LABEL GOES HERE
CONTENTS GO HERE.
And while this button just has text, you can put other stuff in it too! Like images, and heck, even more buttons!
Now if we want that button to change based on if it's open or closed, we can use the [open] attribute selector* to select children of the details elements with the open attribute, which the button will gain once it has been opened. Like this:
CSS
#workskin .button > .change-text::before {
content: "TEXT FOR CLOSED: "; /* <-- Notice the space after! */
}
#workskin details[open] > summary > .change-text::before {
content: "TEXT FOR OPENED: "; /* <-- And again here! */
}
*Prior to an edit, this was originally using the :open pseudo-class, which doesn't work on Safari! See the end notes for details.
What this does is target children of our button, which picks up the label. Then we want to do that again, but only if our details is opened. This feels clunky and weird, so if anyone has any suggestions to make this a bit nicer, I am open to suggestions.
And our sneaky trick is wrapping a span around the summary-label in order to target it and get our styling to work
Work Text*
<details>
<summary class="button">
<span class="change-text">LABEL GOES HERE</span>
</summary>
<p>CONTENTS GO HERE.</p>
</details>
Which gives us this:
LABEL GOES HERE
CONTENTS GO HERE.
We can do the same for after instead of before.
CSS
#workskin .button > .sesame-prose::after {
content: " open sesame!";
}
#workskin details[open] > summary > .sesame-prose::after {
content: " close the prose!";
}
Work Text*
<details>
<summary class="button">
<span class="sesame-prose">Click to</span>
</summary>
<p>How whimsical!</p>
</details>
Click to
How whimsical!
If we want the text to be replaced entirely, just use either before or after and use a space instead of text for the label. Just be wary that this will result in a blank dropdown for anybody without the site-skin (there are workarounds for this, I can imagine someone using invisible text to create a label that disappears with the workskin enabled and appears when it is disabled).
CSS
#workskin .button > .click-me::before {
content: "Click me!";
}
#workskin details[open] > summary > .click-me::before {
content: "Again please!";
}
Work Text*
<details>
<summary class="button">
<span class="click-me"> </span> <!-- Notice the space instead of text -->
</summary>
<p>Wow the label changes!</p>
</details>
Wow the label changes!
You can also combine both before and after, but at this point, you should probably just replace the entire text.
Pesterlogs (Skip to Chapter for implementation)
Lastly, here's how to do Homestuck-style pesterlogs.
Use the CSS for the buttons as seen before. We also want a show-hide class that says show/hide depending on if the button is closed or opened. Then append your preferred method of adding dialogue. My CSS for the dialogue looks like this, because I am way too lazy to add <br /> after each line of dialogue.
CSS
/* Show/Hide text */
#workskin .button > .show-hide::before {
content: "Show ";
}
#workskin details[open] > summary > .show-hide::before {
content: "Hide ";
}
/* Homestuck Dialog Stuff */
#workskin .log {
background: #eeeeee;
border: gray dashed 0.5px;
}
#workskin .dialog {
font-weight: bold;
font-family: "Courier New","CourierPrime",courier,monospace;
line-height: 1.35;
padding-right: 2.7em;
padding-left: 2.7em;
padding-bottom: 0.7em;
}
#workskin .dialog p {
margin: 0;
}
#workskin .dirk {
color: #f2a400;
}
#workskin .jake {
color: #1f9400;
}
Work Text*
<details class="log">
<summary class="button">
<span class="show-hide">Pesterlog</span>
</summary>
<!-- Put your dialog here using your preferred method -->
<div class="dialog">
<p class="dirk">TT: Jake.</p>
<p class="jake">GT: Whats up dirk?</p>
<p class="dirk">TT: Didn't we have this conversation already?</p>
<p class="jake">GT: Nope, this one is different!</p>
</div>
</details>
And that gives us this:
Pesterlog
TT: Jake.
GT: Whats up dirk?
TT: Didn't we have this conversation already?
GT: Nope, this one is different!