I was hoping someone could push me in the right direction with a problem. I’m looking to build a little application with collapsible column to display text. I need three columns aligned horizontally that can be closed or expanded when clicked so as not to overwhelm the reader. The columns need to be persistent if the reader wants to compere two columns. There will be 3 columns horizontally and 4 /5 vertically.
I’ve been researching accordion and collapsible widgets but have only seen examples with one column not 3 or more.
Could anyone tell me if this is achievable with javascript, jquery or can I go about this another simpler option? Any suggestions on how I would do this or what this is even called would be appreciated. Many thanks
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!).
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.
Many thanks for taking the time to write such a useful and detailed post. You have hit the nail on the head and the examples will be invaluable in solving my problem.
BTW I’m a teacher with very little programming knowledge and its because of this I’ve found Hype to be fantastic for creating content for my students. It’s amazing the difference a little technology can make.
So I’ve been playing around with this and I’ve come across an issue. As I mentioned in my original post, I need the boxes to stay open if the user wants to see all five content boxes. My problem is that when I open all boxes everything goes crazy. See example : https://dl.dropboxusercontent.com/spa/75xmmpzshs5cjad/Exports/Accordion/Accordion.html
I’ve attached my project file as I’m sure it’s something I’ve done. I’d appreciate anyones input as to what I’ve done wrong.
Example: “Panel 3” of the Accordion (Timeline 3) to be open - triggered by “On Scene Load”. Lather. Rinse. Repeat as needed for other panels You want to be open.