As I implement the show more/show less feature, I am uncertain if achieving a smooth effect is feasible. However, I believe it's worth reaching out to this community for some creative ideas on how to make it possible.
I have a list of dynamic links with a fixed limit of 5. When clicked, the number increases and determines whether certain sections are displayed or hidden using ng-hide/ng-show.
My goal is to create a seamless transition when clicking the show more or show less links, making the effect elegant and not too abrupt.
Links markup:
<ul class="precall-journal-links">
<li ng-repeat="fact in pc.historyRecords | limitTo:pc.limit" style="list-style-type: none; margin: 5px 0;">
<a style="color: #345bab;" ng-click="pc.load_history_record(fact.dump.PreCallID); ">{{fact.dump.PrimaryKeyName}}:{{fact.dump.PreCallID}}
_Date:{{fact.dump.MeetingDate}}
_Time:{{fact.dump.MeetingTime}}
_Location:{{fact.dump.MeetingLocation}}
</a>
</li>
</ul>
Show more/show less markup:
<div class="arrows" style="position: relative; top: 2px; left: 40px;">
<div ng-hide="pc.historyRecords.length <= pc.limit">
<a style="position: relative; bottom: 5px; color: #3e4c67;" ng-click="pc.increaseItemCount()">See More <i class="fa fa-arrow-down"></i></a>
</div>
<div ng-hide="(pc.limit === 5)||(pc.historyRecords.length <= 5)">
<a style="position: relative; bottom: 5px; color: #3e4c67;" ng-click="pc.decreaseItemCount()">See Less <i class="fa fa-arrow-up"></i></a>
</div>
</div>
Javascript to increase/decrease limit:
vm.limit = 5;
vm.increaseItemCount = function (item) {
vm.limit = vm.limit + 5;
};
vm.decreaseItemCount = function (item) {
if (vm.limit > 0) {
vm.limit = vm.limit - 5;
}
};