How TO - Read More Read/Less Button with angular 5

Question

I'm looking for a solution to add a button read more and less in my long text with angular 5 or I need to convert this code with Js to angular 6:

readMoreButton.js:

$(document).ready(function(){
    $('.service-info').hide();
    $('.read-less').hide();
      $('.read-more').click(function(){
          $(this).hide();
          $(this).next().show();
          $(this).next().next().show();
        })
      $('.read-less').click(function(){
        $(this).prev().hide();
          $(this).prev().prev().show();
          $(this).hide();
      })
  })

readMoreButton.html

<a class="read-more">Read More </a>
  <div class="service-info">

    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
  </div>
<a class="read-less">Read Less</a>


<div class="separator"><hr></div>


<a class="read-more">Read More </a>
  <div class="service-info">

    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>
    <p> Lorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaretLorem ipusum dolorem isaret</p>

  </div>
<a class="read-less">Read Less</a>

Your question is not clear. Can you tell what is not done in your code and what is the problem that you are facing — brk, Mar 04 '19 at 10:58
Check this link : https://stackoverflow.com/questions/37819312/angular-2-read-more-directive. — Abhishek Gautam, Mar 04 '19 at 10:58
Possible duplicate of [How to toggle (show/hide) element in Angular 4?](https://stackoverflow.com/questions/47528880/how-to-toggle-show-hide-element-in-angular-4) — Jaykant, Mar 04 '19 at 10:58

score 3 · Answer 1 · answered May 21 '19 at 10:36

How I achieved this

Step 1:

<button type="button" (click)="alterDescriptionText()">
   { showShortDesciption ? 'SHOW ALL': 'SHOW LESS' }}
 </button>

Step 2: (In Your .component.ts File)

 showShortDesciption = true

 alterDescriptionText() {
    this.showShortDesciption = !this.showShortDesciption
 }

Step 3:

<div [ngClass]="{'show-less': showShortDesciption}">
      <!-- Your Text Here -->
</div

Step 4:

.show-less {
    height: 4rem;
    overflow: hidden;
    padding: 1rem;
}

Basically i'm altering the height of div on button click

score 0 · Answer 2 · answered Jun 15 '22 at 15:47

0

Try to use the angular plugin "@minni/read-more". Check out the link here. It's quite a simple and easy-to-use plugin.

answered Jun 15 '22 at 15:47

minni minhaj

152
1
4

How TO - Read More Read/Less Button with angular 5

2 Answers2