Afficher et cacher des éléments css avec lire plus et lire moins !

<div id="a_manipuler" style="display: none">
    TEXTE
    <br />
</div>
<button id="toaffich" onclick="affichManipul()">Lire +</button>
<script>
    function affichManipul() {
        if(document.getElementById('a_manipuler').style.display == "none") {
            document.getElementById('a_manipuler').style.display = "block";
            document.getElementById('toaffich').innerHTML = "Lire -";
        } else {
            document.getElementById('a_manipuler').style.display = "none";
            document.getElementById('toaffich').innerHTML = "Lire +";
        }
    }
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="a_manipuler" style="display: none">
    TEXTE (avec jQuery)
    <br />
</div>
<button id="toaffich">Lire +</button>
<script>
    $('#toaffich').on('click', function() {
        if(document.getElementById('a_manipuler').style.display == "none") {
            $('#a_manipuler').fadeIn();
            $('#toaffich').html('Lire -');
        } else {
            $('#a_manipuler').fadeOut();
            setTimeout(function() {
                $('#toaffich').html('Lire +');
            }, 450);
        }
    });
</script>

Sur le site lorsqu'on clique sur "La plateforme Parcoursup" il y a une animation qui affiche des informations qui étaient cachés à la base tout
en restant sur la même page et c'est cette animation que je voudrais
avoir pour mon site

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="toaffich">Lire +</button>
<div id="a_manipuler" style="display: none">
   TEXTE (avec jQuery)
   <br />
</div>
<script>
   $('#toaffich').on('click', function() {
      if(document.getElementById('a_manipuler').style.display == "none") {
         $('#a_manipuler').slideToggle();
         $('#toaffich').html('Lire -');
      } else {
         $('#a_manipuler').slideToggle();
         setTimeout(function() {
            $('#toaffich').html('Lire +');
         }, 250);
      }
   });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://www.parcoursup.fr/styles/parcoursup_css_v2.css" />
<div id="content">
    <h2 class="theme" id="toaffich">
        <label id="lt1" class="faqthemesection" for="ct1">
            <a style="cursor: pointer" aria-expanded="true" class="aPourAccess">
                La plateforme Parcoursup
            </a>
        </label>
    </h2>
    <div id="a_manipuler" style="display: none">
        <section aria-hidden="false" class="faqsection" id="st1q1">
            <h3 class="question">
                <label id="lt1q1" class="faqquestionsection" for="ct1q1">
                    <a style="cursor: pointer" aria-expanded="false" class="aPourAccess" onclick="$('p#rt1q1').slideToggle()">
                        Parcoursup c'est quoi ?
                    </a>
                </label>
            </h3>
            <p aria-hidden="true" id="rt1q1">
                Parcoursup est la nouvelle plateforme d'admission en première année des formations de l'enseignement supérieur : www.parcoursup.fr.<br>Si vous souhaitez rentrer dans l'enseignement supérieur à la rentrée 2018, cette plateforme vous permet de vous informer sur les formations, de déposer vos voeux de poursuite d'études et de répondre aux propositions d'admission des établissements d'enseignement supérieur qui vous sont faites.<br>Vous pouvez formuler vos voeux sur Parcoursup à partir du <strong>22 janvier 2018.</strong>
            </p>
        </section>
        <section aria-hidden="false" class="faqsection" id="st1q2">
            <h3 class="question">
                <label id="lt1q2" class="faqquestionsection" for="ct1q2">
                    <a style="cursor: pointer" aria-expanded="false" class="aPourAccess" onclick="$('p#rt1q2').slideToggle()">
                        A quoi sert la nouvelle plateforme Parcoursup ?
                    </a>
                </label>
            </h3>
            <p aria-hidden="true" id="rt1q2">
                Parcoursup vous permet :<br><i class="ulrepfaq"><strong>de créer votre dossier</strong> de préinscription dans le supérieur</i><i class="ulrepfaq"><strong>de trouver des informations sur les différentes formations du supérieur</strong> : à chaque fois que vous sélectionnez une formation, <a class="aNormal" href="index.php?desc=formations" title="Découvrir le contenu des formations">les caractéristiques de cette formation</a> s’affichent, notamment les attendus de la formation</i><i class="ulrepfaq"><strong>d'émettre vos voeux</strong> de poursuite d’études sans les classer</i><i class="ulrepfaq"><strong>de compléter votre dossier</strong> avec les éléments demandés par l’établissement d’enseignement supérieur</i><i class="ulrepfaq"><strong>de confirmer vos voeux</strong>  pour qu’ils puissent être examinés par les établissements d’enseignement supérieur</i><i class="ulrepfaq"><strong>de recevoir des propositions d’admission</strong></i><i class="ulrepfaq"><strong>de répondre aux propositions</strong> qui vous sont faites</i>
            </p>
        </section>
    </div>
</div>
<script>
    $('#toaffich').on('click', function() {
        $('#a_manipuler').slideToggle();
    });
</script>