Howdy, Stranger!

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

How to hide/show different div on click?

As the title implies, I'm trying to reuse the same space for multiple div elements, but I want to toggle which ones are visible when clicking some buttons I've made.

So basically to sum this up: I want to be able to show/hide several divs by an on-click event of another div. I've tried to get this working in JS/CSS, but nothing wants to lol. Hoping one of you guys/gals here can help me out again :)

Thanks in advance.


  • Which version of Twine and StoryFormat are you using?

    This is pretty simple, but the code for various versions/format will be different.
  • Ah my apologies (twice I've made this mistake now! lol), I'm using Sugarcane (1.4.2).
  • edited May 2015
    The simplest way to do this is to enable jQuery and then to use it to show/hide the div elements.

    To enable jQuery you first need to use the Story > Special Passages > StorySettings menu item to add a StorySettings special passage to your story and then open that passage and check the Include the jQuery script library? checkbox.

    Once this is done you can use passage code like the following to show/hide the div elements:
    <div id="panel1">This is panel 1</div>
    <div id="panel2" style="display: none;">This is panel 2</div>
    <div id="button1" onclick="$('#panel1').toggle();">Click me to show/hide panel 1</div>
    <div id="button2" onclick="$('#panel2').toggle();">Click me to show/hide panel 2</div>
    note: The above is very basic but shows the basic techniques needed to do what you want.
Sign In or Register to comment.