Streaming live at 10am (PST)

Slider not working if set to display:none on load then display:block later


I have a grid of images that expand on click using a JQuery plugin I found on codepen.

See here: – click on the images in the grid to show the expanded content.

Inside each of the expanding panels I have placed a webflow slider.

The trouble is that the expanded content panels need to have display:none to hide them until a link is clicked to reveal the relevant panel. This causes the sliders to not load properly – the console gives this error: TypeError: undefined is not an object (evaluating ‘data.mask’)

I’ve found a few posts with a similar problem where the slider component needs ‘redrawing’ after being hidden.

@cyberdave – in other posts, you suggest this to redraw the slider: Webflow.require('slider').redraw(); – however I’m not sure where to add this to my project to get it working for each of the sliders – would I have to initiate the redraw individually for each slider after each click of the grid links or is there a way I could redraw all at once? (also do I need to incorporate the redraw into the plugin itself?)

Any advice appreciated!

Change script to

  onExpandAfter: function() {

Also, feel free to contact me for further code help and/or customization of third-party plugins


Thank you once again @samliew, it works perfectly as usual!