Heyyy! I have a twine sugarcube coding question and I have no eloquent way of asking it so here it is: I want the user to be able to click on a word and a description pops out from underneath and then I want them to be able to re-click that same word and the description is hidden again. sos pls do you know how :) is what im asking even a thing
Hey Veirse!
That's totes possible. And there different ways of going at it (depending on what you want to do with your page, and how far you want the description to appear).
As always, the code below can be found on my PasteBin account.
How To Toggle a Description!
Chapel's Message Macro
The MVP of SugarCube custom macros has something to help: the << message >> macro. It allows you to toggle a part of text by clicking on a link. Click once, it appears. Another time and it disappear. It's pretty much the << linkappend >> macro, but you can hide the text again.
You just need to add the Macro code to the JavaScript, and use the macro as such:
<<message "Clickable Text">> Description Text/Message to appear <</message>>
Note: by adding btn after the "Clickable Text", the links become a button instead.
This method is nice if you want the text to appear just below the link. If you want a working example, check the Drawers section in Scene 1 of CRWL.
CyCy's Liveupdate Fix
Technically, not specific to your case, but still works. I've used it for the toggable menu of Exquisite Cadaver (which uses the Simple Book Template). This method is similar to Chapel's macro, but the toggled text doesn't have to be just below the link.
You can find CyCy's Liveupdate Custom Macro here, just need to add that to your JavaScript. Then it is just a matter of creating a link and some conditions:
<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<else>> <<set $trigger to false>> <</if>> <<update>> <</link>> <<liveblock>> <<if $trigger>>Description Text/Hidden Message<</if>> <</liveblock>>
Note: if you have multiple << liveblock >> on the page, the << update >> macro will trigger them all.
Maliface's On/Trigger Macro
Works like Cycy's but you can target one block rather than all of them. You can find the JavaScript code here, and the manual there. And it goes something like this:
<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<else>> <<set $trigger to false>> <</if>> <<trigger 'blockname'>> <</link>> <<on 'blockname'>> <<if $trigger>> Description Text/Hidden Message<</if>> <</on>>
Note: Chapel's Event Macro uses the same macro name. These two macros cannot be used together, unless the name of one of them is modified in the JavaScritpt (Macroadd line)
Span, Link and Replace
And finally, if you want to go OG Sugarcube Code, here's the thing: using the << replace >> macro. It's essentially Maliface's On/Trigger Macro, but with the Base SugarCube Macros.
I have used this option in TTATEH (asking questions) and La Petite Mort (doing actions).
You will need: a span (div works too) with a defined ID/Class, a link, a conditional statement and the replace macro.
<<link "Clickable Text">> <<if not $trigger>> <<set $trigger to true>> <<replace "#target" t8n>>Description Text/Hidden Message<</replace>> <<else>> <<set $trigger to false>> <<replace "#target" t8n>><</replace>> <</if>> <</link>> <span id="target"></span>
Notes: the t8n adds a transition effect to make the new block appear. If you want to target a class instead of an idea, change the # into a . and the id into class.
Overall Notes: for all options, aside from Chapel's, you can use a temporary variable (_var) instead of a permanent one ($var).
