Question 182617 in Html Question posted in
Some basic documentation can be found here.

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

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

2

Answers


  1. 0 
    First, you'll need to include the Font Awesome library in 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>
    Login or Signup to reply.
  2. 0

    it requires no JavaScript. CSS is optional to customize.

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

    but it’s not a free freelance hiring website. please do a research before submitting a question

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search