How to add a jQuery accordion

Hello all,

So I want to add a jQuery Accordion to my application like this one:

tympanus.net/Tutorials/FlexibleSlideToTopAccordion/index2.html

I tried to do it by adding a plugin, but if you download the source, you get some Javascript and some CSS files, and if you add those to your directory (like: Construct 2\exporters\html5\plugins\accordion) and run construct 2, it doesn't work. Now I am not sure if adding a plugin is the best way to this or there is some other way to do this (I am still new to Construct 2). I searched the forums, but didn't really get the answer...

Any help is appreciated   <img src="smileys/smiley1.gif" border="0" align="middle" />

Did you want to embed the app into the jquery, or jquery into the app?

I was able to embed a test game into a jquery accordion panel. I posted a link over here..thread The game and the instructions get tucked away in an accordion. I was pretty happy with those results.

Why do you have to use jQuery, you can create some events, that will change the elements height, and append the content. On the next click, you reset the layout and then append text to the container that was clicked after.

— Val

I just want to embed the jQuery into the app. Some thing close to what you did, but inside the accordion I will not have the actual app but just some text or may be another jQuery plugin. But I will be interested in how you embedded a 3rd party's jQuery plugin in your app. Thank you

PS: The idea behind your app (Peek a Boo) is pretty cool !

wildmedia

Yeah we can do that too, given that you don't have many accordion elements. If I have 10-15 of these elements, and each has a different and variable size, then it would be inefficient to create these events to change the height and reset the layout it and moving back and forth. If you use the jQuery plugin, you wouldn't need to worry about finding the exact height of each element, which should make life easier. But your idea will work if you have fewer elements, may be 5-7. Thank you for reply !

I don't know how to put jquery into the game. I put the game in a jquery accordion template I made earlier. So I guess I did it backwards.

— Val

Ah so you created your own jQuery accordion template !! I was actually planning to use a 3rd party template, because I have no idea as to how to create/write your own Javascript or jQuery templates !!! The problem with using 3rd party templates or plugins (like the link I had used before) is that you have to modify their javascript files because Construct 2 specifically looks for the "common.js", "edittime.js" and "runtime.js" files and I can't create them (yet) :(

Here is where I learned how...

w3schools.com/jquery/jquery_examples.asp

w3schools.com/jquery/tryit.asp

I suck at javascript that is why i found j query more useful. I'm not sure about performance issues, and what will happen when these codes get tangled up together. So That is why I wanted to post it. So I can have some of those questions answered as well.

Ah okay that should help me write my own jQuery plugin as well, by using the Javascript SDK template of course !! Thank you !!

Hello,

I tried to get an accordion into my web app and struggled to find a tut.

Here's how to do it:

Plugins required:

CallJS

CSS Import

Pode HTML DIV

Place an html div into your layout give it a name and inside place the required code. For accordion h tags and div tags.

Create your external js file. Import into project and link it in the propeties of CallJS. In this file is where you put your code. e.g.

$("mydiv").accordion();

Get your jquery theme, using theme roller or whatever. Import into project and link it in the properties of CSSImport.

You can also include the jquery ui or what ever other tools you enjoy.

Works with node webkit, havent tried mobile platforms yet.

Hope this helps.