Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

How to Show/Hide Text in Sugarcube v2

Is there a way to toggle a link macro in Sugarcube v2 to show text and then hide it?

For example, suppose I create a link called "Height" and want the player to see text describing how tall they are. When they click on the link, the text will be revealed. (Which is something I know how to do.) But how can the same link be used to hide that text?

Here is what I have so far for this endeavor:

<<link "Height">>
<<replace "#text">>Your height is about average for someone your age.<</replace>>
<</link>>: 5'10"
<span id="text"></span>

It works to reveal the text I want the player to see upon clicking the link. But I also want to give the option of hiding the same text by clicking the link again.

Thanks!

Comments

  • Please use the code tag when posting code or markup—it's C on the editor bar.


    Will your text be static, as in your example, or will it be dynamic?

    If it's static, then you could do something like the following:
    <<link "Height">>
    	<<toggleclass "#text" "hide">>
    <</link>>: 5'10"
    <span id="text" class="hide">Your height is about average for someone your age.</span>
    
    Which will require the following style: (Twine 1: goes in stylesheet-tagged passage; Twine 2: goes in Story Stylesheet)
    .hide {
    	display: none;
    }
    


    If it's dynamic, then you could do something like the following:
    <<link "Height">>
    	<<if (ndef _description) or _description is "">>
    		<<set _description to "Your height is about average for someone your age.">>
    	<<else>>
    		<<set _description to "">>
    	<</if>>
    	<<replace "#text">>_description<</replace>>
    <</link>>: 5'10"
    <span id="text"></span>
    
  • Thanks! Your recommendation works.
  • Please use the code tag when posting code or markup—it's C on the editor bar.


    Will your text be static, as in your example, or will it be dynamic?

    If it's static, then you could do something like the following:
    <<link "Height">>
    	<<toggleclass "#text" "hide">>
    <</link>>: 5'10"
    <span id="text" class="hide">Your height is about average for someone your age.</span>
    
    Which will require the following style: (Twine 1: goes in stylesheet-tagged passage; Twine 2: goes in Story Stylesheet)
    .hide {
    	display: none;
    }
    


    If it's dynamic, then you could do something like the following:
    <<link "Height">>
    	<<if (ndef _description) or _description is "">>
    		<<set _description to "Your height is about average for someone your age.">>
    	<<else>>
    		<<set _description to "">>
    	<</if>>
    	<<replace "#text">>_description<</replace>>
    <</link>>: 5'10"
    <span id="text"></span>
    

    I'm trying to make one of this. And this helped!
    I do want to ask, what do the following mean:
    (ndef _description) or _description
    
    is _description also a variable? but uses _(underscore) instead?
    is ndef means undefined?
  • mega01man wrote: »
    I do want to ask, what do the following mean:
    (ndef _description) or _description
    
    is _description also a variable? but uses _(underscore) instead?
    is ndef means undefined?
    _description is a temporary variable, and the Variables section of the v2.x manual explains the deference between story variables ($) and temporary variables (_).

    The <<if>> macro's documentation defines the ndef operator, it is used to test if a variable has been initialised (assigned a value) yet.

    So the <<if (ndef _description) or _description is "">> line is checking to see if the _description temporary variable has been assigned a value yet, or if it's value is equal to an empty String.
  • greyelf wrote: »
    mega01man wrote: »
    I do want to ask, what do the following mean:
    (ndef _description) or _description
    
    is _description also a variable? but uses _(underscore) instead?
    is ndef means undefined?
    _description is a temporary variable, and the Variables section of the v2.x manual explains the deference between story variables ($) and temporary variables (_).

    The <<if>> macro's documentation defines the ndef operator, it is used to test if a variable has been initialised (assigned a value) yet.

    So the <<if (ndef _description) or _description is "">> line is checking to see if the _description temporary variable has been assigned a value yet, or if it's value is equal to an empty String.

    Thank you very much for the answer! XD
Sign In or Register to comment.