Howdy, Stranger!

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

Collapsible Text in SC 2.0

Hello! I would like to know if there is a way to create collapsible text that is shown/hidden when you click on a word in the passage that is linked. I am trying to add optional insight to different elements of the lore in my story. The idea is to basically have passages within passages to explain events that happened long ago in the game world that the player did not take part in so that the player understands some key story elements, but are completely optional for the more speedy types.
Thanks a lot.

Comments

  • edited June 2016
    The following describes one method to add "spoiler" like behaviour, it consists of three parts:

    1. A CSS class that you will use to the hide the "spoiler" Text:
    This CSS should be placed within your Story Stylesheet area.
    .hidden {
    	display: none;
    }
    

    2. A way of identifying the "spoiler" Text that will be conditionally shown/hidden.
    You can use a div element with an unique ID to do this, you can also use your new hidden CSS class to make the div invisible by default. The following goes in your passage, you can change the ID to whatever makes sense to you but I am using hintA
    <div id="hintA" class="hidden">The text you want to conditionally show/hide.</div>
    

    3. A way of toggling the hidden class on the #hintA div.
    You can use a combination of a <<click>> macro and a <<toggleclass>> macro to do this, place the following in the same passage as point 2.

    note: If you changed the ID of the div in point 2 then you need to also change the first parameter of the toggleclass macro below, be careful not to delete the # at the start of the ID parameter.
    Some text with a <<click "link">><<toggleclass "#hintA" "hidden">><</click>>
    

    Your final passage could look something like the following:
    Some text with a <<click "link">><<toggleclass "#hintA" "hidden">><</click>>
    <div id="hintA" class="hidden">The text you want to conditionally show/hide.</div>
    Some more text
    
Sign In or Register to comment.