Advance timeline on button click within Bootstrap Accordion menu

Using JavaScript with Hype
1

I have a manually added Bootstrap accordion menu which includes buttons that collapse and expand the menu sections.

I would like to also use these buttons to advance the timeline and that's where I'm stuck. I assigned an onclick function to each of the buttons and I included this function within the document head. However, I don't know how to write the function as the following doesn't work that way.

hypeDocument.continueTimelineNamed('timelineName', hypeDocument.kDirectionForward, false)

I think I need to take an entirely different direction but cannot find anything in the Hype API documentation so any pointers are very much appreciated.

Bootstrap_accordion.zip (43.8 KB)

Thanks for your help!

2

you could add a function onsceneload that inits eventListeners for the buttons ...

	document.getElementById(hypeDocument.currentSceneId()).querySelectorAll('.accordion-button').forEach(
	function(button){
	button.addEventListener('pointerdown', function(){
	hypeDocument.continueTimelineNamed('Progress-bar', hypeDocument.kDirectionForward, false)
	})
	}
	)
3 Likes
3

Yeah event listeners. I will try that.

Thanks Hans!

4

Check out Hype Action Events as it might be helpful. Just assigning data-pointerdown-action to yourHypeFunction() on a parent is a simple way to set up an event listener that works based on the principle of event bubbling. For more examples check out:

1 Like