I am not conversant with building apps - but I would think carefully about why You would want to use Hype for this task. A regular web app like Dreamweaver & jQuery would be so straightforward, almost all the tricky parts are automated as You could use “static” or “relative” positioning which would allow for using jQuery’s slideUp(), slideDown(), slideToggle(), & toggle() animation effects.
Here is a link to an example. While this example is displaying just one horizontal stack of divs (with two columns in a div), it would not be hard to have two or more divs set-up in side-by-side columns as You are describing in your post above. Below is part of the code that runs the accordion effect:
On this example page that’s how all the “accordion” divs work basically - You don’t have to track the location of anything - it’s all automated. Dead simple.
With a program like Hype, that uses absolute positioning, none of this would work - You’re swimming upstream. But You can write the code for it in Hype (a lot more!).
Another approach is to use the timelines.
I have created two examples:
Projects: Accordion v3_aSync.hype.zip (30.6 KB) and Accordion_v3_Sync.hype.zip (30.4 KB)
The asynchronous version shows the columns independently (a feature You asked for) & the synchronous version which keeps similar categories synced across the columns - which I think makes it easier to compare columns.
Each Category (i.e. Category “A”, “B”, & “C”) has its own timeline, and is its own group (each one holding the text elements named “Category” & “List”).
Below is a graphic showing the stage & layer view in the Timeline. The text at the right shows the names~relationship to the layers below the stage.
The “Categories” are placed in sub-groups (i.e. “Cat Group 2”); and there are only one or two categories per sub-group. This set-up makes it easy to use timelines to run the accordion effect - they are either fully opened - or they are closed (in essence a binary set-up). You always know exactly what position to set them in. When You get more than two categories in a sub-group it becomes extremely difficult to determine a reference point (without code) of where the “category” elements are positioned on the page at any given time.
Perhaps someone has some one has another insight here, but this “two categories to a sub-group” makes timeline creation very easy, as the reference point is always the containing subgroup with only two possibilities.