fadeToggle() não funciona corretamente

Estou tentando utilizar fadeToggle() na seção de comentários do meu blog para abrir o formulário de respostas aos comentários já existentes. Inicialmente estou aplicando display: none com CSS para esconder as a lista de comentários e o formulário. A ação de fadeOut deve ser realizada ao clicar no link ‘Responder’. Entretanto, quando eu clico em responder, eu vou direto para o início da pagina e o efeito não funciona. Revisei a hierarquia no html para ter certeza que que a função seria redirecionada para o classe correta, mas, mesmo assim, algo não está correto.

html

<blockquote class="blockquote">
  <p>{{ comment.content }}</p>
  <footer class="blockquote-footer">Por: {{ comment.user }} | {{ comment.timestamp|timesince }} atrás |
    {% if comment.children.count > 0 %}{{ comment.children.count }} comentário{% if comment.children.count > 1 %}s
    {% endif %} | {% endif %}<a class="comment-reply-btn" href="#">Responder</a>
  </footer>
  <div class="comment-reply">
    {% for child_comment in comment.children %}
    <blockquote class="blockquote">
      <p class="mb-0">{{ child_comment.content }}</p>
      <footer class="blockquote-footer">Por: {{ child_comment.user }} |
        {{ child_comment.timestamp|timesince }}
        atrás
      </footer>
    </blockquote>
    {% endfor %}
    {% if request.user.is_authenticated %}
    <form action="" method="POST">
      {% csrf_token %}
      {{ comment_form|crispy }}
      <input type="hidden" name="parent_id" value="{{ comment.id }}">
      <input class="btn btn-secondary" type="submit" value="Responder">
    </form>
    {% else %}
    <p>Você deve logar para comentar</p>
    {% endif %}
  </div>
</blockquote>

css

.comment-reply {
  display: none;
}

js

<script type="text/javascript">
    $(document).ready(function () {
      $(".comment-reply-btn").click(function (event) {
        event.preventDefault();
        $(this).parent().next(".comment-reply").fadeToggle();
      })
    })
</script>