To show first 3 rss items before expanding

ionic-v1
1

I have the code that able to expand and reduce when user click on the ‘plus’ or ‘minus’ sign. However, I want to shows

Before expand, shows first three rss news. After expand, shows all rss news.
I want to shows text ‘More’ and ‘Less’ besides the ion-plus and ion-minus
before expand:

after expand:

This is my code:

html

<div class="card">
  <div class="item item-divider">News</div>
  <a class="item item-icon-right" ng-if='showMoreNews'ng-repeat="story in stockNews| orderBy: 'pubDate':true" ng-click="openNews(story.link)">
    <h2>{{story.title || ''}}</h2>
    <h6>{{story.pubDate | characters:17:false:false || 'N/A'}}</h6>
    <p ng-if="story.description.length > 0">{{story.description | htmlToPlaintext}}</p>
    <!-- <i class="icon ion-ios-arrow-right"></i> -->
  </a>
  <div ng-click="toggleNews()" <i class="icon" ng-class="showMoreNews ? 'ion-android-remove-circle assertive' : 'ion-android-add-circle positive'"></i><i class="padding" ng-class="showMoreNews ? 'Less' : 'More'"></i></div>
</div>

AngularJS

 $scope.showMoreNews = false;
    $scope.toggleNews = function(){
      $scope.showMoreNews = !$scope.showMoreNews;
    };

Please advice how to make it to work as the desirable result?

2

You can take a look at this https://github.com/loringdodge/ionic-item-expand. Just change the css and I think it will do.

3

Expand itself I manage do that. But I just want to shows 3 rss items even when it is collapse. Expand will show all.

Currently, I show non of the rss item when collapse.