Is it possible to switch between SVG animations?

Question

Animation

There are 2 animations, one draws a circle, the 2nd hides it, both work on click, by default the circle is hidden and the circle drawing animation is hung on the click. How to make it so that after drawing the circle on the click, the animation of hiding it and vice versa?

<circle r="50" cx="100" cy="100" stroke-width="20" stroke-dasharray="0 314" style="fill: red;stroke: rgba(255,255,0,.5);" id="circle-s">
<animate attributeName="stroke-dasharray" begin="click" dur="1s" from="0 314" to="314 314" repeatCount="1" fill="freeze" href="#circle-s" id="show"/>
    <animate attributeName="stroke-dasharray" begin="click" dur="1s" from="314 314" to="0 314" repeatCount="1" fill="freeze" href="" id="hide"/>
</circle>