Derouler un texte JS

Hello tout le monde !

voici mon code html pour faire un texte deroulant :
<p class="post-subtitle"><b></b><br></p>

<blockquote class="blockquote">
<?= $post->getFormattedContent() ?>
</blockquote>Auteur(e) du post : <?= e($post->getAuthor()) ?>
Le <?= $post->getCreatedAt()->format('d F Y H:i') ?><br>

<div class="box">
<div class="d-flex justify-content-center">
<button class="btn btn-secondary text-white"><?php echo count($comments); ?> commentaires à consulter <span class="badge badge-secondary">
</span></button>
</div> <br>
<div class="bg-secondary">
<div class="card">
<div class="card-body">
<blockquote class="blockquote_post">
<?php foreach ($comments as $comment) { ?><br><hr>
<?= $comment->getContent(); ?><br><br>Ecrit par : <?= e($comment->getAuthor()) ?>
Le : <?= $comment->getCreatedAt()->format('d M Y H:m') ?>
<?php } ?>
</blockquote>

Ca fonctionne !! j'ai mon fichier JS:
$('button').click(function(){
$('.bg-secondary').toggle();
});

ainsi que mon script d'ajouté dans mon layout:
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>

Alors ca se replie et se déplie !!! mais pas dans le bon ordre !!
je m'explique: lorsque j'ouvre ma page : mes commentaires sont deja ouvert!
j'aimerai l'inverse : ouvrir ma page et pouvoir deplier ou pas mes commentaires!

j'ai cherché :( j'ai pas trouvé !

pourriez vous m'aider? merci bcp