Как - Читать дальше Читать / Меньше Кнопка с угловой 5 - PullRequest
Новая
       6

Как - Читать дальше Читать / Меньше Кнопка с угловой 5

0 голосов
/ 04 марта 2019

Я ищу решение для добавления кнопки «читать больше и меньше» в моем длинном тексте с угловым 5 или мне нужно преобразовать этот код с Js в угловой 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>

1 Ответ

0 голосов
/ 21 мая 2019

Как я этого добился

Шаг 1: 

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

Шаг 2: (In Your.Файл component.ts) 

 showShortDesciption = true

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

Шаг 3: 

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

Шаг 4: 

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

В основном я изменяю высоту div при нажатии кнопки

...