How to make a side panel appear and disappear

Authoring Twine
1

Twine Version: 2.4.1.0

Hi all,

I have implemented my own UI for my story which has a number of panels around the main story panel. I now want one of those panels to be hidden when the game starts and appear later when a button is pressed to continue. So far I have this javascript:

window.togglePanel = function() {
	const lp = document.getElementById('left-panel');
            if (lp.style.display === 'none') 
            	{
                lp.style.display = 'block';
                }
            else 
            	{
                lp.style.display = 'none';
	        }
        };

The panel in question is:

<div id="left-panel" class="panel">
<span id="side-panel" data-passage="side-panel"></span>	
</div>

I call my javascript using:

<a data-passage="Intro" class="btn">
	<<run togglePanel>>
	<<button "Continue">>><</button>>
</a>

When I test this I get no error, but the panel remains hidden? Any help would be appreciated. Thanks.

2

You can use a button to go to a new passage btw:
<<button [[Continue|Intro]]>><</button>>
They work like links.

:thinking:
I think it’s possible to do it in CSS otherwise, with the toggleclass macro.

Assuming the panel is in the StoryInterface

   <div id="left-panel" class="hidden">
<span id="side-panel" data-passage="side-panel"></span>	
</div>

<<button [[Continue|Intro]]>>
     <<toggleclass "#left-panel" "hidden">>
<</button>>

and in the Stylesheet:

#left-panel {
   display : block;
}
.hidden {
   display: none;
}
3

Not sure if it has anything to do with your problem, but in your code

<<button "Continue">>><</button>>

there’s three greater than signs in a row.

4

That won’t bring any issue :wink: The code still works if you have one too many >

5

The whole

<a data-passage="Intro" class="btn">
	<<run togglePanel>>
	<<button "Continue">>><</button>>
</a>

Is not functional Sugarcube code.

You can’t make your own <a> link and put code inside it, that code just runs immediately as soon as the passage loads. Moreover the <<button>> doesn’t have either a destination or any content, so it doesn’t do anything either. Finally the <<run togglePanel>> is not correct Javascript syntax — to call a function you need to have a () at the end of the function name.

Here’s a version that actually does something :slight_smile:

<<button [[Intro]]>>
    <<run togglePanel()>>
<</button>>

As for the togglePanel() function itself, it should work, but it would probably work a lot easier if you used JQuery, which is built in to Sugarcube.

window.togglePanel = function() {
    $('#left-panel').toggle();
}

One final note. It’s generally considered to be a bad idea to define functions directly on window, as the chance of your function colliding with some other code is high. The usual Sugarcube advice is to define functions on the setup object instead. e.g. setup.togglePanel = function() { ... } which you would call with <<run setup.togglePanel()>>. You don’t have to do this, I often don’t, but it’s worth knowing that’s there’s a risk involved in not doing it.