Dropdown Hyperlink/Button

Twine Version: 2.9.2
Sugarcube Version: 2.37.3 (Might not be important but just in case it’s helpful)

Hello! I’m trying to make a changelog and want to display changes for every version on a single passage. Just listing every change organized by version number would eventually clog up the passage with a ton of changes, so I was wondering how I would be able to create a hyperlink or button that can expand and retract, showing the changes instead.

I’ve tried following the thread u/riotcatgrrrl asked in in r/twinegames, and there were a solution for what I needed using both hyperlinks and buttons in Harlowe, but it’s confusing to me and I can’t seem to replicate it myself in SugarCube.

Could anyone help me make an expandable button or link? It doesn’t matter which.

You could probably use a reveal link which embeds your “update list” passage into the title screen, but I don’t believe there’s an easy way to retract and make that text disappear again, short of a camouflaged “back” link that doubles back to the page before without the revealed text.

In my experience, this is best done as a modal window which doesn’t exist by default in most versions of Twine unless you do a JS or HTML popup window. A modal window is when you get a text box that hovers over the main screen text temporarily to give you information - and it may or may not have links or buttons inside of it to click. The player can then click outside the window to dismiss it.

Cookbook example might be out of date? SugarCube - Twine Cookbook

Chapel has code you can add to enable modal windows, called “popovers”.

Where you can enable a modal window as simply as this:

<<popover>>\
    Hi there! Welcome to my game!
    
    <<button "Continue">><<dismisspopover>><</button>>
<</popover>>

Chapel’s <<popover>> and <<dialog>> macro sets are just wrappers for SugarCube’s built-in Dialog API.

That said, the macro sets do make the Dialog API somewhat easier to use if JavaScript scares you, so can be a good option in that case.

1 Like

OP, your post on Reddit makes it seem like you want something like the <details> element.

EDIT: Ah ha! Maliface has just such a macro, the <<details>> macro.

2 Likes

Yep! It looks like how I wanted it to. I’ve never imported someone else’s macro before though. Do I just copy what they have attached to my js and css passages?

Yes.

Thank you! I put the following into a test passage and got it to work. One last question, what does the <<class=>> part mean in detail and span? I was wondering what would happen if I changed it. Would it destroy the macro?

<details class="macro-details">
   <summary>Summary</summary>
   <span class="inner-details">...contents...</span>
</details>

That’s not the macro, but an example of its HTML output instead. Examples of the macro are under the Syntaxes subsection, rather than the HTML output subsection.

For example, the following is an example of the macro.

<<details 'Summary text' [open] [name]>>
   ...contents...
<</details>>

Where:

  • ‘Summary text’: Is the string argument setting the summary text—i.e., the text that shows normally.
  • open: Is an optional keyword argument controlling whether the element is open by default. You probably don’t want to use this normally.
  • name: Is an optional string argument setting the name of the element. You should only use this when you want to group multiple elements together so that opening one closes all the others.

Oh, so are these what I’m supposed to put in the passages instead?

<<details 'Summary text' ['open'] [name]>>
   ...contents...
<</details>>
<<details uniqueID ['open'] [name]>>
   ...contents...
<<summary>>
   ...summary text...
<</details>>

I initially thought I was supposed to use these, but I got an error saying Error: cannot execute macro <<details>>: unable to parse macro argument "[": malformed link markup for both and Error: child tag <</details>> was found outside of a call to its parent macro <<details>> for the second one.

You don’t put the ['open'] and [name] arguments in like that literally. The square brackets, in this case, just indicate that these are optional values.

You should be literally entering:

<<details "My Summary Text" open>>
   ... contents ...
<</details>>