2 buttons that open/close the menu and change the context?

Question

JavaScript

Greetings! Such question:
There are 2 buttons Button1(Dogs) and Button2(Cats).
By clicking on any of them, a pull-down menu appears that runs over these buttons. But they are displayed on top of the menu. z-index is set.
Depending on the pressed button, a menu opens, for example, with breeds of dogs or cats.

The catch is that the task is such that if we clicked on the "Dogs" button, the menu with breeds opened, and we clicked on the "Dogs" button again, then the menu closed. But if we clicked in the open menu, the menu did not close the "Cats" button, but changed the content from dog breeds to cat breeds (according to the tab principle). And of course, already the Cat Button will close the menu by pressing it again.

I hope I managed to explain.

Answer 1

1. Monitor status: open/closed.
2. If another button is clicked and the flag is in the "open" state, perform a close before going to the default handler.