flGravity supports this item


This author's response time can be up to 5 business days.

164 comments found.

Colio expander has trouble with scrolling on mobile. I’m using iPhone, iOS 10.

When I click a thumbnail to expand the colio content, it works great. But when I use my finger to scroll down to read the rest of the content, it collapses the colio-content. Then I have to scroll back up, click the thumbnail again, then the content expands. Then if I scroll VERY slowly, the content will remain expanded. But, if I scroll just a little too quickly, it will collapse again. I’ve tried scrolling on both sides of the screen, making sure not to hit the thumbnail or the close button, and it still happens.

Is there a way to fix this? Here are my settings:

$(’.expandable-grid’).colio({ id: ‘expanded-container’, placement: ‘inside’, closeText: ‘Close ’, scrollPage: false, navigation:false, scrollOffset: 80, contentFilter:’#bio-wrap’ });

Yes, it happens on your demo as well. I’m using iPhone using version iOS 10.3.2. If you expand an item, then scroll down to read the rest of the content, it will collapse. I made sure not to hit the close button while scrolling down.

If I remove this line from the code, it works. So this is the culprit:

`// for 'inside' placement hide viewport immediately on resize
           if(self.settings.placement === 'inside' && /^(smart)?resize$/.test(e.type)) {

However, that part is necessary for resizing properly.

Try to replace the code that hides viewport on resize with this code, specifically for smartphones

if(self.settings.placement === 'inside' && navigator.userAgent.match(/i(pad|phone)/i) !== null && e.type == "orientationchange") {

Feature request – support for linking (from another page) to grid thumbnail and open respective thumb details based on selected #id in link, ie. www.domain.com/#colio_c3. Collapse-Pro-Matic has this feature, have you considered an update? Or maybe more documentation on using the expand API on how to get this to work? Thanks!


I have implemented this feature in WP version of my plugin. It uses Colio API expand() method to open item by index in grid. If you are interested here is JS code from WP version


                    // if no hash in URL, return
                    if(window.location.hash == '') { return; }

                    // look for item 
                    var target_item = list.find('[data-hash="' + window.location.hash + '"]');

                    // return if there is no matching item
                    if(target_item.length == 0) { return; }

                    // get item page and index
                    var target_index = target_item.index(),

                    // wait for page switch transition to end and expand item
                            list.trigger('colio', 'excludeHidden').trigger('colio', ['expand', target_index]);
                        }, options.transitionDuration + 1000);

                }, 1500);

Unfortunately I don’t plan to add this as a standalone feature as it can be implemented using plugin API and some JS code.

Hi there,

Having difficulties implementing this on a client’s WordPress website. There seems to be a script conflict with the theme, or plugin conflict, or both.

Using the Divi theme, the slide down parts are not clickable – namely the next/previous buttons, and the X close button, also none of the content can be selected.

When another required plugin is active, namely the WordPress Social Stream: https://codecanyon.net/item/wordpress-social-stream/2201708?s_rank=1 The image accordion stops working completely. I would really welcome your assistance, and would be fine if there is additional cost for this support. Thanks!

Well, I feel a little silly … I see now that you have a WordPress plugin version for this. Will try the WordPress version and see if that solves the problem.


hu8035 Purchased

Hi, I am using the black version, and it’s set to 4 columns. Can you please let me know which file I need to change and how in order to make it either 2 or 3 column.

Thank you!

Hello! Initial amount of columns is set via CSS in css/layout.css by setting up image thumb dimensions.

 .portfolio .list .thumb {
    width: 215px;
    height: 134px;
Then when you resize browser, thumb size is changed also via media queries

    @media only screen and (min-width: 768px) and (max-width: 959px) {
        .portfolio .list .thumb { width: 228px; height: 143px; }

    @media only screen and (max-width: 767px) {

        .portfolio .list .thumb { width: 420px; height: 260px; }

So to add more columns to portfolio you should make thumb size smaller as 215×134


hu8035 Purchased

Thanks! That worked!