How do you bump text down/up in a passage after revealing/hiding a previous text? sugarcube 2

Authoring Twine
1

hey, very new to twine. right now i have

hey (line 1)<<link "^^1^^">> 
<<toggleclass "#text" "hide">><</link>>
<span id="text" class="hide">this is a footnote i'd like to show and hide </span>(line 2)
this is text that i'd like to be on line 2 in the beginning, then move down to this line (line 3) when the footnote is revealed and move up when the footnote is hidden. planning to use this for footnotes that might be a few lines long so i'd like a general solution

video example from a website (not in twine), it changes the footnote number to an x and reverts it too while maintaining the link, is there a way to do that too? 2021-12-25 23-22-15_Trim_Trim.mp4

2

Welcome Hawk,

I’ve met the same difficulty some time ago and the best thing I could imagine was to recharge the passage, with a special story variable.

text that flows.<<if ndef $p>><<link "note" "the name of the current passage">><<set $p to 0>><</link>><br>Text to hide.<<else>><<link "note" "the name of the current passage">><<unset $p>><</link>><</if>>

“the name of the current passage” is the name of the passage in which you want to show or hide text. When you link of the passage you might want to unset $p, in order to use the same trick again.

1 Like
3

@hawk
HTML elements used to display (textual) content fall into two basic categories, those that are inline based and those that are block based.

The <span> element you’re using has a default display property value of inline, when what you really want to be using is a block based element like a <div> or possible even a <p> paragraph element.

The following code example replaces your <span> with a <div>, and uses Line Continuation markup to allow code to be formatted a little.

hey (line 1)\
<<link "^^1^^">> 
	<<toggleclass "#text" "hide">>
<</link>>
<div id="text" class="hide">this is a footnote i'd like to show and hide </div>\
this is text that i'd like to be on line 2 in the beginning, then move down to this line (line 3) when the footnote is revealed and move up when the footnote is hidden. planning to use this for footnotes that might be a few lines long so i'd like a general solution

note: You didn’t supply the CSS associated with your hide class rule, so I assumed it looks something like…

.hide {
	display: none;
}
1 Like
4

thank you both for your solutions! also this is exactly what i wanted