title: Show More/Show Less ngFor data on button click
body: <p>I am getting an issue while showing and hide ngFor data. I want to show one record by default and when anyone clicks on the See more button remaining record will be shown. I don't want to autoclose the prev records. Currently, the previous Itinerary content will be autoclosed when I open another itinerary. Anyone, please help me? Here is the components file.</p>
  <pre><code>&lt;div class=&quot;itineraryDay&quot; *ngFor=&quot;let eventList of eventDailyItineraray; let i = index&quot;&gt;
  &lt;div class=&quot;itineraryDay-header&quot;&gt;
      &lt;h5&gt;Day {{i+1}}&lt;/h5&gt;
      &lt;p&gt;{{eventList.tourevents[0]?.categoryName}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&quot;itineraryDay-detail&quot;&gt;
      &lt;div class=&quot;itinerary-cards&quot;&gt;
          &lt;mat-card class=&quot;mycard&quot; *ngFor=&quot;let event of eventList.tourevents | slice:0:[selectedIndex === i ? max  : 1 ]; let j = index&quot;&gt;
              &lt;div class=&quot;day-activity d-flex&quot;&gt;
                  &lt;div class=&quot;activity-img&quot;&gt;
                      &lt;img [src]=&quot;(event?.eventPic ? firstEventImage(event?.itemId,event?.eventPic):'./assets/media/icons/preview-item.svg')&quot; /&gt;
                  &lt;/div&gt;
                  &lt;div class=&quot;activity-detail&quot;&gt;
                      &lt;div class=&quot;activity-detail-inner d-flex justify-content-between align-items-center&quot;&gt;
                          &lt;div class=&quot;activity-category d-flex&quot;&gt;
                              &lt;img src=&quot;{{categoryPic}}{{event?.categoryIcon}}&quot; /&gt;
                              &lt;span&gt;{{event?.itemName}}&lt;/span&gt;
                          &lt;/div&gt;
                          &lt;div class=&quot;activity-hours d-flex align-items-center justify-content-end&quot;&gt;
                              &lt;img src=&quot;./assets/media/icons/access_time-24px.svg&quot; /&gt;
                              &lt;span&gt;{{durationCalculation(event?.duration)}} Hours&lt;/span&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;p&gt;{{event?.description}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/mat-card&gt;
      &lt;/div&gt;
      &lt;div class=&quot;see-more&quot;&gt;
          &lt;div class=&quot;icon-inner&quot;&gt;
              &lt;p (click)=&quot;toggle(i, $event)&quot; class=&quot;seeMore&quot;&gt;See More&lt;/p&gt;
              &lt;div class=&quot;more-icon&quot; (click)=&quot;toggle(i, $event)&quot; [ngClass]=&quot;{'active': selectedIndex === i}&quot; &gt;
                  &lt;i class=&quot;flaticon-eye&quot;&gt;&lt;/i&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is the click function in ts file.</p>
  <pre><code>toggle(index, event){
  
  this.max = this.eventDailyItineraray[index].tourevents.length;
  
  if(this.selectedIndex === index){
    this.selectedIndex = -1;
    event.currentTarget.parentElement.children[0].innerText = 'See More';
  }else{
    this.selectedIndex = index;
    event.currentTarget.parentElement.children[0].innerText = 'See Less';
  } } 
  </code></pre>
  <p><a href="https://i.stack.imgur.com/TwsRP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TwsRP.png" alt="Screenshot" /></a></p>