[SOLVED] Expand/Collapse text within a passage

jkingyost

This is probably a really basic question but I'm having troubles with it. I want to create a passage that has expandable/collapsible text within it. Basically, I have a passage that is a fictional magazine article with several headings/sections within. The entire article on one page is a bit overwhelming for a reader, but it does need to be read in a linear manner. So I thought of having the headings as a list of links, and clicking on the heading would expand its section's text (clicking again collapsing it). Kind of like how Wikipedia works on mobile devices.

Googling this brought me a lot of javascript options but I can't seem to get any of them to work correctly. I'm new to twine and javascript, though. Is there a simple way of doing this that I am missing? Thanks for any help!

greyelf

Attached is an example of how to use two macros built into the SugarCube story format (click and toggleclass) and a little CSS to Expand and Collapse text.

jkingyost

Thank you! That is exactly what I was looking for.

hopethisworks

i need the solution. i dont see the attachment greyelf mentioned.
the links take me to generic documentation page.

pls help

greyelf

This topic was created on the old forum software, the attachment must of been eaten during the change over to the current software.

1. Place the following In your story's stylesheet tagged passage.

.hidden {
	display: none;
}

2. Use code like the following within your story passage.

<<click "The text of the first heading">><<toggleclass "#section1" "hidden">><</click>>
<div id="section1" class="hidden">The text of the section for the first heading</div>

<<click "The text of the second heading">><<toggleclass "#section2" "hidden">><</click>>
<div id="section2" class="hidden">The text of the section for the second heading</div>

Note that the first parameter of the toggleclass macro is the same as the ID as the related div element with a hash character added to the start of the ID to let the toggleclass macro know that it is an ID of an HTML element.

Each HTML (div) element within the same passage must have an unique ID.

hopethisworks

thanks for the prompt reply. i copy-pasted your code as is, but its not working. see screenshots. i am sure i have messed it up due to some other code that might be interfering. pls help

hopethisworks

screenshot of the passage code

hopethisworks

never mind. my mistake. had forgotten to change the CSS.
sorry.

i do have a follow up question. how do i change the title of the link text every time it is toggled.

thanks in advance.