Toggle not working as expected
Jul 29, 2021
Hello,
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
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
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.
perhaps it hadn't saved the version I uploaded definitely only closes when you press the close icon
Just downloaded the version I uploaded initially definitely stays open:
https://360.articulate.com/review/content/baf51cef-1c1e-4910-a9c7-c5b769a7a697/review
Thanks again. It is still behaving the same way - I click the accessibility icon and the panel appears as expected, but immediately disappears (exit animation) as well. It does the same thing on both slides.
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!!!
I think you are looking at the wrong file, see the example I posted taken from the same file I uploaded the menu stays open
Just realised I have done it on the menu button, that should point you in the right direction to get this working
You dont need a trigger to toggle between selected it is built in function
I would add the menu to the slide master as a layerinside a state is not going to work well here