它不需要JavaScript。CSS是可选的自定义。summary标签将是显示的部分，单击它将打开/关闭p元素。
我还为开头部分添加了一个动画。

details p{
  animation: anim 400ms;
  transform-origin: top;
}

@keyframes anim{
 from{
  transform: scale(1, 0);
  opacity: 0;
 }
 to{
  transform: scale(1, 1);
  opacity: 1;
 }
}

<h1>Hello world website</h1>

<details>
  <summary>Show the text</summary>
  <p>Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants.
       En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une                   formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques.
 Ce parcours de plusieurs années me permet d’aider plusieurs femmes à se soigner physiquement et mentalement.
2021 je rencontre un soucis de santé qui me contraint à arrêter les massages par avis médical mais ma passion a raison de tout je décide  de me former dans un cursus RNCP sur les différents massages visages pour être Facialiste et en parallèle je passe mon diplôme d’esthéticienne que j’obtiens.
Maintenant je prend plaisir a sublimer vos visages entre mes mains en mettant en pratiquant mon savoir-faire . 
   Je vous donne Rendez-vous m sur Aix en Provence pour découvrir mes soins signatures.
</p>
</details>

首先，您需要在HTML文件中包含Font Awesome库。您可以在HTML文件的head部分添加以下链接：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
        
<div class="qodef-m-content">
      <p class="qodef-m-text long-text">
        <!-- Your long text goes here -->
      </p>
      <button class="show-more-btn"><i class="fas fa-chevron-down"></i>Show More</button>
    </div>
    
    <style>
      .qodef-m-text {
        /* Your existing CSS styles */
        height: 200px; /* Set a fixed height for the initial display */
        overflow: hidden; /* Hide overflowing content */
        transition: height 0.3s ease; /* Add smooth animation on height change */
      }
    
      .qodef-m-content.collapsed .qodef-m-text {
        height: auto; /* Expand the height to show the full content */
      }
    
      .show-more-btn {
        /* Your button styling */
        display: block;
        margin-top: 10px;
        background: none;
        border: none;
        cursor: pointer;
      }
    </style>
    
    <script>
      const textContainer = document.querySelector('.qodef-m-text');
      const showMoreBtn = document.querySelector('.show-more-btn');
      const collapsedClass = 'collapsed';
    
      showMoreBtn.addEventListener('click', function() {
        textContainer.classList.toggle(collapsedClass);
        if (textContainer.classList.contains(collapsedClass)) {
          showMoreBtn.innerHTML = '<i class="fas fa-chevron-down"></i> Show More';
        } else {
          showMoreBtn.innerHTML = '<i class="fas fa-chevron-up"></i> Show Less';
        }
      });
    </script>

您可以使用JavaScript和CSS实现所需的功能。下面是一个示例，说明如何使用“显示更多”按钮来显示文本的截断版本，该按钮在单击时会展开内容：
HTML：

<div class="qodef-m-content">
    <p class="qodef-m-text" id="qodef-m-text">
        Bonjour je suis Olfa une nana hypersensible marié et maman de deux enfants.
        En 2018 je quitte mon activité dans la finance qui ne colle pas avec mes valeurs et je commence une formation en naturopathie afin d’avoir des bases en médecines naturelles, très vite ma soif d’apprendre me dirige vers des techniques de massages corps, des thérapies brèves et des soins énergétiques.
        Ce parcours de plusieurs années me permet d’aider plusieurs femmes à se soigner physiquement et mentalement.
        2021 je rencontre un soucis de santé qui me contraint à arrêter les massages par avis médical mais ma passion a raison de tout je décide de me former dans un cursus RNCP sur les différents massages visages pour être Facialiste et en parallèle je passe mon diplôme d’esthéticienne que j’obtiens.
        Maintenant je prend plaisir a sublimer vos visages entre mes mains en mettant en pratiquant mon savoir-faire.
        Je vous donne Rendez-vous m sur Aix en Provence pour découvrir mes soins signatures.
    </p>
    <button class="show-more" onclick="toggleText()">Show More</button>
</div>

CSS：

.qodef-m-text {
    font-family: "Cormorant Garamond", sans-serif;
    font-style: italic;
    font-weight: 400;
    font-size: 33px;
    line-height: 42px;
    width: 80%;
    margin-left: 10%;
    max-height: 200px;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.show-more {
    display: block;
    margin-top: 10px;
    background: none;
    border: none;
    color: blue;
    cursor: pointer;
}

JavaScript：

function toggleText() {
    var text = document.getElementById("qodef-m-text");
    var button = document.querySelector(".show-more");

    if (text.style.maxHeight) {
        // Text is expanded, so collapse it
        text.style.maxHeight = null;
        button.innerHTML = "Show More";
    } else {
        // Text is collapsed, so expand it
        text.style.maxHeight = text.scrollHeight + "px";
        button.innerHTML = "Show Less";
    }
}

这段代码设置了文本元素的最大高度，并隐藏了任何溢出的内容。单击“显示更多”按钮触发toggleText()函数，该函数根据文本的当前状态展开或折叠文本。
您可以根据自己的喜好自定义样式和动画。此外，如果您想使用“显示更多”和“显示更少”按钮的特定图标，则可能需要包含Font Awesome库。