How to make a simple fade in/out panel with jQuery?

I’m trying to make a text fade in and fade out, alternately, as you click a button, using jQuery. I came up with this code:

$("button").click(function() {
  $('#p1').fadeIn();

  $("button").click(function() {
    $('#p1').fadeOut();
    $('button').off("click");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button>Button</button>
<p id='p1'> Paragraph </p>

That works only once (fades in first click, fades out second) and the button stops working forever.

If I comment out line 5, the button works once and everytime I press it again, the text fades in and out at the same time, which is not what I want.

What am I doing wrong?

Answer

There is a method fadeToggle() which toggles between fadeIn and fadeOut.

$("button").click(function() {
  $('#p1').fadeToggle();
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<button>Button</button>
<p id="p1">Paragraph</p>