Hide object when activating another?

Question

JavaScript

codepen.io/iiil/pen/KGerA
It is necessary that the activated elements are replaced with each other, and not overlapped.
What to add to JS? Thank you.

Answer 1

Add in the first step
$('div').removeClass('active')

Answer 2

Add a check for display:block or for the presence of the active class, can you handle it yourself?