This task is to add an enhancement to enable easier toggling open and closing the help panel on Desktop when using it for guidance during editing.
From the parent task, this proposal is for the following user story
>**When** I am using guidance during editing and need to access an area obscured by the help panel,
>**I want** to be able to quickly toggle the panel display (or otherwise move it out of the way)
>**So that** I can easily complete the editing tasks whilst following the in-context tips.
==== Proposed solution
Use the help panel call to action button as single toggle button to open and close the help panel.
//designs forthcoming //
=====Proposed changes
**1. Move position of the help panel to sit above help CTA button and always visible.**
**2. Make the CTA the single button to toggle opening and closing the help panel.**
Currently the CTA only opens the help panel, we want to also make it toggle closing the help panel.
**3. Update the design of the CTA button when the panel is open**
Mocks:
| Panel open {F31875215} | Panel closed {F31875213}
**4. Add animation transition on loading the page to show how the help panel opens up !! and closes!! from the CTA**
a) Panel opening
{F31912087} //open full screen to see animation //
or else view on https://youtu.be/LrkB765Hfik
Description of the animation:
- Animation starts only after the page has finished loading
- Panel fades in upwards/outwards from the CTA button
- "?" icon rotates `90 degrees` counter-clockwise and fades out whilst the expand icon simultaneously fades in and rotates counter-clockwise from `45 degrees` to `0 degrees`
b) Panel closing
//open full screen to see animation //{F31912089}
or else view on https://youtu.be/lbi62ttyhI4
Description of the animation:
- Triggered when either close button or help panel CTA button is selected
- Panel fades out down and inwards to the CTA button
- Expand icon rotates clockwise to `90 degrees` and fades out, whilst the "?" icon simultaneously fades in and rotates clockwise from `-45 degrees` to `0 degrees`