how can i do a show more/ show less animated button to hide a part of a text

Question

I have a text that is quiet long and i want to show a part of it and the remaining can be showed by a clicking a button that show more (maybe a font awesome arrow down icon) and a show less (font awesome arrow up icon) with some css animation. is it possible to get help with that ?

html:

<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>

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%;
}

You can refer [here](https://www.w3schools.com/howto/howto_js_read_more.asp) — Srushti Shah, Jun 05 '23 at 11:36

score 0 · Answer 1 · edited Jun 05 '23 at 19:04

First, you will need to include the Font Awesome library within your HTML file. You can add the following link in the head section of your HTML file:

<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>

Vagif VALIYEV · Answer 2 · 2023-06-05T13:44:25.403

it requires no JavaScript. CSS is optional to customize. summary tag will be the shown part and clicking to it will open/close the p element.
I also added an animation for the opening part.

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>

"i want to show a part of it" - how does your code achieve this? — Nico Haase, Jun 05 '23 at 13:31
@NicoHaase There's literally a `Show the text` part in the code. replace that with the part that, well, you want to show. — Vagif VALIYEV, Jun 05 '23 at 13:34
Please add all clarification to your question by editing it. A good explanation is always good, such that others can learn from your answer — Nico Haase, Jun 05 '23 at 13:41

score -1 · Answer 3 · answered Jun 05 '23 at 12:15

You can achieve the desired functionality using JavaScript and CSS. Here's an example of how you can show a truncated version of the text with a "Show More" button that expands the content when clicked:

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";
    }
}

This code sets a maximum height for the text element and hides any overflowing content. Clicking the "Show More" button triggers the toggleText() function, which expands or collapses the text based on its current state.

You can customize the styles and animation as per your preference. Additionally, you may need to include the Font Awesome library if you want to use specific icons for the "Show More" and "Show Less" buttons.

how can i do a show more/ show less animated button to hide a part of a text

3 Answers3