Collapsible Widget

Hi Everyone,

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

You could use persistent symbols. They could change shape when clicked. Since they're separate symbols, they could work independently.

@radiodrive

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:

$('#commercialDesign_Header').click(function() {
		$('#commercial_Design_Holder').toggle(1000);
		$('#commercial_Consult_Holder').slideUp(1000);
		$('#residential_Holder').slideUp(1000);	
	});

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:
Accordion v3_aSync.hype
Accordion_v3_Sync.hype

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.

3 Likes

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.

Thanks again.

1 Like

Hi everyone,

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.

Thanks in advance!

Accordion.hype.zip (23.0 KB)

@radiodrive

So here we are again - the two of us. Nothing has changed since my first post; I made everything up as I went along - feel free to do the same.

You need to section out the variables by grouping your panels into discrete units. i.e. …

The panels above a “Header” (Group) selection are irrelevant; panels underneath need to be moved en bloc.

Below - Screen Shots - View the differences in our layouts (using your general layout concept):

Last time around You missed the concept of sub-groups… (or was that because of my poor description?)

Demo here.
Project file:Accordion-radiodrive_JHSv2.hype.zip (21.6 KB)

Edit: Additional credit - add “Headers” 6 & 7… follow the pattern ;->

1 Like

i did this, work whit js and have a feature that prevent to have two accordions open at the same time.

accordion.hype.zip (932.5 KB)

1 Like

Hi Jim,

Thank you so much to share your work.

Starting from your clever accordion demo using timelines, how would you adapt your file to get the option to leave some panels open at start?

Hi Pierre!

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.

1 Like

Good morning Jim,

Simple case are always welcome!

Many thanks.

Pierre-Y. Plourde