Toggle not working as expected

Jul 29, 2021


I am adding in some keyboard controls to a course and would like to have it so that when the learner highlights (either by mouse or tabbing) an icon and clicks it, a small panel appears with a list of additional keyboard controls that can be used in the course.  

I would like there to be an enter and exit transition.  At moment, when the icon for the panel is clicked, the panel appears and disappears immediately - it is obviously running both the intro and exit animations right away.  I tried removing the exit animation and that did solve the problem of the panel immediately exiting, but the toggle rule I put on the triggers does not work and once the panel is clicked onto the screen, I cannot get it to be clicked off.  

Side question: I tried this originally by having the panel show and hide based on the user hovering over the icon.   This worked really nicely except for two issues - 1st, if the user moved the mouse off of the icon and onto the visible panel, the panel would flash like a strobe light - it should have exited once the mouse moved off of the icon.  And secondly, I could not get the panel to appear when tabbing to the icon and not using the mouse.  I would prefer to use this hover option, but ultimately I need it to work. 

Any help is appreciated.


10 Replies
Phil Mayor

Not sure this answers your question but this animates in and out on user control, second one does on hover, only issue here is that what happens is the trigger fires each time hover is activated (i.e. when the menu hides, probably need to hide the close button. Perhaps add hotspot outside the menu instead on the menu layer.

You will need to add all your other objects just beware if the are not grouped with the menu then for the animations to match up they need to be same width as the menu

Andrew Hoskins

Hi, thanks for the quick response.  Unfortunately, I think I worded my question poorly - there is no issue with the menu.  The problem I am dealing with surrounds the accessibility icon to the left of the menu.  In the demo file you sent back, it still has the same issue that when clicked the accessibility panel shows and then immediately disappears.  

I am re-sharing a version without the menu to reduce confusion.  My apologies for that.

Andrew Hoskins

I have found a solution based on your first comment and have added a transparent box above the icon that changes the state to the one I want upon click - that box also changes it's own state to hidden on the click - allowing the user to then click the accessibility icon which resets everyting.

Thank you for taking the time to help!!!