Basic JS accordion

Tips & Tricks
10

Hi to All!

Whatever others’ interest I’ve decided to move ahead with the “Timeline~JavaScript” hybrid approach as (semi) outlined above. The following feature straight JavaScript - no jQuery.

Project Demo: Accordion v4d.hype.zip (21.3 KB)

Online demo here.


"Accordion" Overview (3-panel Demo; the Accordion resides inside a Symbol):

1) Accordion panels are grouped into nested layers (divs) to effect the movement of all panels below the selected panel. Examining the provided Demo will prove more illuminating about this set-up than a hundred words written here. Basically imagine sleeves sliding inside of sleeves… pretty simple really.

2) Each Accordion panel has a matching 1 second Timeline (i.e. three in the case of this demo).

3) Below is the script (function “catSelector”) that runs the accordion in conjunction with the Timelines:

var whatSym = hypeDocument.getSymbolInstanceById('Accordion_1');
var timelineNum = document.querySelectorAll(".accordPanel"); // determine # of panels
var accordPanel = element.id.slice(-1); //get the timeline number based on the panel ID
accordPanel = "Cat "+accordPanel; // set the variable to match the timeline name

   // close all accordion panels
for (i = 1; i < timelineNum.length + 1; i++) {
    whatSym.continueTimelineNamed("Cat "+i, hypeDocument.kDirectionReverse);
} 

    // the chosen panel's open~close response
	if(whatSym.currentTimeInTimelineNamed(accordPanel) == 0) {
		whatSym.startTimelineNamed(accordPanel);
	} else if (whatSym.currentTimeInTimelineNamed(accordPanel) > 0) {
		whatSym.continueTimelineNamed(accordPanel, hypeDocument.kDirectionReverse);
	}
1 Like