Playing different button animation after first animation plays

Sorry if the title doesn’t make much sense, ill try to explain. I have animated my button so that on the first press, it will look like this:

88829-scrollup.png

I want to make it so that once you click the down arrow, or on the second press, the menu will close and go back to this state:

88830-scrolldown.png

I have both animations setup, but I cannot figure out how to make the button go back to the original state after the menu slides up.

You can create one bool parameter in the animator controller. Then you can attach a button component to the menu or some kind of script which can detect a mouse click/touch (whatever you need) so you can change the parameter via script. Then you set up the animator controller so on one value it (true) it goes to the state in the first pictute and on the other value (false) it goes to the state in the second picture. Pseudocode:

    Button myButton;
    AnimationController myAnimController;
    bool myState;
    
    void Awake()
    {
       myButton.onClick.addListener(changeMenuState);
    }

    void changeMenuState
   {
       myState = !myState;
       myAnimController.setBool("BoolParameter", myState);
   }