Is it possible for someone to assist me with showing a long text partially and providing a "show more" button to reveal the rest, along with a "show less" option, all with some CSS animation? I was thinking of using a font awesome arrow down icon for expanding and an arrow up icon for collapsing.
The HTML code snippet:
<div class="qodef-m-content">
<p class="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>
</div>
The CSS styling:
.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%;
}