how do I make inventory tabs? [harlowe]

Question

I would like to make an investory with multiple screens and tabs up top to change between the two (think like how you switch between browswer tabs). How to I make this? Would I need to use some js and use onclick? currently I have the part of the display that would change in a different div than the tabs, although they are all nested in a larger div together as well.

Here's what It looks like at the moment, to give you a better idea.

Answer 1

Sorry if this explanation is too abstract, but I don't think you'd have to use any javascript. 

1. Set up your page as you want it with html <div> tags wrapping each box. 
2. For the elements you want to change which you click buttons, wrap them in Twine hooks. 
3. Then set up the links for "Basic Inventory" and "Detailed Inventory" to replace the contents of the hooks.

So set up the hook ?inventory_page:  

[<div>Basic Inventory Displayed Here</div>]<inventory_page|

And use links set up like this: 

(link:"Detailed Inventory)[(replace:?inventory_page)[<div>Detailed Inventory Displayed Here</div>]]

You'd have to set up the links to reload themselves, so that they can be clicked repeatedly, but that's the gist of it.

Comments

Harlowe's content render process has an issue with displaying block based HTML elements like <div>, it causes the displaying of the content of such elements to be at different transition rate that the other content of a Passage.

This answer to the Using headings (markdown or html tags) causes a delay in displaying text question explains how to use CSS and the display: inline-block property setting to overcome this issue.

In this specific case you would target the div element in the CSS selector, which the last example in that answer demostrates.