How to use the jQuery Accordian widget in Twine?

Question

I'm trying to make a collapsible content panel using the jQuery Accordion widget, but I can't seem to figure out how to get it to work in Twine.  I feel like I'm missing something here.

Can anyone show me how to get this working?

Thanks.

Answer 1

The other answers didn't really help.

It turned out that, because it was at the start of the Twine story, I had to do things a bit different.  In the JavaScript I did this:

setup.Path = "";
importStyles(setup.Path + "jquery-ui.css");
var promise = importScripts(setup.Path + "jquery.js", setup.Path + "jquery-ui.js");

promise.then(function() {
	$("#accordion").accordion({
		collapsible: true,
		heightStyle: "content"
	});
}, function() {
	alert('failed import');
});

The promise function gets triggered after the first passage is rendered, and then the passage displays the accordion div correctly.

Comments

That's because you are using external JS files, which take time to load once the story format engine has started and displayed the first Passage. This is why I embed the related jQuery UI Javascript & CSS code within the story project itself, because it removes that delay.

---

But I don't want to add more code to the JavaScript or CSS sections of my code, and this works!

Not to mention the fact that it makes updating the jQuery code incredibly easy.

I'm sorry, but for what I'm doing, putting the jQuery stuff in the story project itself was a total non-starter for me.  I need for there to be as little JavaScript and CSS from other sources as possible.

I don't know why you downvoted a working solution.

Answer 2

You're not giving us much to work on here.  How are you loading the plugin (both its JavaScript and CSS)?

Comments

I tried a couple of different ways, mainly using importScripts and importStyles, none of them seemed to work.

Any recommendations on the best way would be appreciated.

---

The two functions you tried are more for loading network resources, though they may work for local resources.

The simplest thing you could do to include local copies would be to copy their contents into the appropriate places in Twine 2, namely the Edit Story JavaScript and Edit Story Stylesheet menu items under the project's menu.

Answer 3

note: I am going to assume that you have downloaded the relevant parts of the jQuery UI library, that you have copied the contents of the relevant JS file(s) into the Story Javascript area of your project, and that you have copied the contents of the relevant CSS file(s) into the Story Stylesheet area of your project.

If you click on the View Source link on the Accordion related page you linked to you will see that there are two main sections to the example:

1. The HTML elements that make up the DATA portion.

Which consists of the accordion ID'ed div element and it's children. You should be able you copy that section 'as is' into a Passage, however because SugarCube automatically converts all line-break within a Passage into HTML br elements and because these can interfere with CSS based layout I would wrap that example content with a <<nobr>> macros.

2. The JavaScript that applies the Accordion effect.

You will need to delay the execution of the accordion() function to after the HTML elements that represent the current Passage have been added to the current HTML page, and you can use the 'Passage display' related Passage Events & Task Objects to do that.

The following Passage content is a cut down version of the HTML code mentioned in point 1 combined with the JavaScript code mentioned in point 2.

<<nobr>>
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer ut neque.</p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet purus.</p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.</p>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
  </div>
</div>
<</nobr>>

<<script>>
	$(document).one(':passagedisplay', function () {
		$("#accordion").accordion({
			collapsible: true
    	});
	});
<</script>>