Ion-collection with split animation


Hello, let’s assume I have an ion-collection list. What I want to do is if a user taps on a list item, then just like Moses parted the Red Sea I want the ionic-list to split at that point and I want to show some content just below that split point. Then when they tap on that list item again, the list converges back. How do I go about this?


If I understood you correctly, you could try using Segmented Control Plugin:


Hi @Gajotres, what a lovely page that is – excellent list of plugins and good learning. Thank you!

Actually, I am looking more for what I found is called an “Accordion” list like this (similar to the tree list in your page) - I just hope it can work with ion-collections.


I think it should work. Try it and if you stumble come back and we’ll figure it out together.


Unfortunately, as I feared, it does not work with collection-repeat.
I use collection-repeat due to performance issues (the list can grow to several thousands, paired with infinite scroll)

I have the modified codepen here

As you see, the moment you change ng-repeat to collection-repeat, the hidden item does not show. Any thoughts on getting this to work whilst keeping the performance of collection-repeat?


I told you I’ll help as much as I can, here’s a working example:


Each time you show/hide additional elements you need to force $ionicScrollDelegate resize.


Damn I have a bug…


Ok[quote=“pliablepixels, post:5, topic:29004”]
As you see, the moment you change ng-repeat to collection-repeat, the hidden item does not show. Any thoughts on getting this to work whilst keeping the performance of collection-repeat?

Unfortunately, the original example was not built with collection-repeat in mind. Though I found an example you can use:

It still uses resize function I tried on your example but this one is made with collection-repeat and resize in mind.


@Gajotres - first, thanks a lot. Actually, the first example too is working great for me when I adapted it to my code (the codepen does not work effectively, I agree).

Do you know how it might be possible to scroll that specific list item to the top? Given that there does not seem to be any way to scroll an item by index to the top, my plan was to get the current scroll position and then do a scrollBy to move that item to the top.

I tried doing the following inside the toggle method to see if I can get the currrent scroll position:

console.log ("CURRENT POS: " + JSON.stringify($ionicScrollDelegate.getScrollPosition())); 

no matter which list item I tap on, it always returns: left: 0, top: 0

Note that my goal is to scroll the tapped list item to the top (not scroll to list item)


Wanted to close this – I found a good way to figure out if I need to scroll the list up to make space for the accordion view

The concept basically is if you expand the list for the accordion view and there is not enough place to display the view, the list should scroll up just enough to show the accordion and then on close scroll back down to where it was. Of course, this scrolling should only happen if there is a need, and only by the amount needed.

After trying several options, the most reliable method was to use $ionicPosition.offset() as it offers the offset of the element tapped relative to document root. So if you know the window size, you know how far the element is from the bottom.

To make ionicPosition work, I had to assign ids to each ion-item and then reference that ID to get the element. If someone knows a better way, please let me know.

My modified code:

<div ng-repeat="event in events| filter:search.text" >
        <ion-item id="item-{{$index}}" ng-click="toggleGroup(event,$index,event.Event.Frames)"
                    ng-class="{active: isGroupShown(event)}">
              <i class="icon" ng-class="isGroupShown(event) ? 'ion-minus' : 'ion-plus'"></i> 
     <!-- followed by other stuff - key change here was id= -->

And then in my controller, inside toggleGroup, which is used to show and hide the accordion:

 $scope.toggleGroup = function (event, ndx, frames) {
           var elem = angular.element(document.getElementById("item-" + ndx));
            var locobject = $ionicPosition.offset(elem);
                var toplocation = parseInt(;
                var objheight = parseInt(locobject.height);
                console.log("top location is " + toplocation);
                var distdiff = parseInt($rootScope.devHeight) - toplocation - objheight;
                console.log("*****Space at  bottom is " + distdiff);

                if (distdiff < 300) // size of the scroller with bars
                    scrollbynumber = 300 - distdiff;
                    $ionicScrollDelegate.$getByHandle("mainScroll").scrollBy(0, scrollbynumber, true);

                    // we need to scroll up to make space
// and opposite logic to close - scrollby with negative index