How can a touch event have the same result as an hover effect on desktop?

Question

On a desktop the div with class="content" will be visible when hovering on the div with class="button". There is also a callback so it automatically fades out when hovering somewhere else.

But, this is not working on a mobile device because it is not possible to hover. I tried different solutions like adding other pseudo-classes (:active, :focus) and tried some JavaScript / jQuery. I also found this question How to simulate hover effect on touch devices?. I think JS is the best way to solve this problem but I am not used to work with that.

Here is my HTML code:

<div class="home">
  <div class="button">
    <div class="content"></div>
  </div>
</div>

CSS:

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.home {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #3d2885;
  width: 100vw;
  height: 100vh;
}

.button {
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  width: 50vmin;
  height: 50vmin;
  background-color: white;
  border-radius: 50%;
}

.content {
  width: 0vmin;
  height: 0vmin;
  background-color: lightgreen;
  -webkit-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
}

.button:hover .content {
  width: 25vmin;
  height: 25vmin;
  border-radius: 15%;
}

And I tried some jQuery:

$('.button').bind('touchstart', function() {
        $(this).addClass('content');
});

$('.button').bind('touchend', function() {
        $(this).removeClass('content');
});

Can anyone tell me how I can implement jQuery (or something else) so that a click event on a mobile device has the same effect as a hover effect on a desktop? In this case I mean that the div with class="content" has a transition effect (growing) on clicking and a transition effect (shrinking) on clicking somewhere else.

Codepen example: https://codepen.io/elinehendrikse/pen/JJVRLm?editors=0110