Create JS to show/hide a couple of elements

Bottom right of this page https://rb.gy/zjttc6 are 2 popups (screenshot: https://www.screencast.com/t/sKllA11I3mMr).

Only the small popup will be shown on pageload. The big one is shown at the moment to facilitate development.

I need a JS created so that:

1) When the small popup is clicked (CSS ID: contact-popup-small-trigger) :
- The small popup fades out quickly (CSS ID: contact-popup-small)
- The big popup fades in quickly (CSS ID: contact-popup-big)

2) When the X on the small popup is clicked (CSS ID: contact-popup-small-close), the small popup fades away quickly (CSS ID: contact-popup-small)

3) When the X on the big popup is clicked (CSS ID: contact-popup-big-close) :
- The big popup fades out quickly (CSS ID: contact-popup-big)
- The small popup fades in quickly (CSS ID: contact-popup-small)