Section to expand rolling

[domivax]

Dear All,

There is a way to expand a section rolling, like a curtain.

Thank you.
Best regards,
Domivax

[noahlovell]

Hey @domivax!

I’m struggling to understand exactly what you’re requesting. Have you got a reference site or something that shows and example?

[domivax]

Dear Noah,

Thank you for your reply.

Indeed, I was talking about a behavior during the expanding of the Section.

To have an idea, the accordion already have this effect (Slide Down). Watch the videos for the differences.

I tried to found out how to do, and I could not.

With Slide Effect

With No Slide Effect

Like a curtain in Image #1

Hoping this helps.

Best regards,
Domivax

[user643]

EDIT: I just realized that it is not the complete solution yet. There is a curtain effect, but the bar #section2 is not moving dynamical. I am trying further.

Thanks to your question I have learnt something new. It seems possible. I use Wix Editor.
Assuming you have set up the accordion effect (container expands on mouse click). Add another container (box2 in example) into the expanding container. Then hide box2 and add the following code to the click event:

let effectOptions = {
‘duration’: 1000,
‘delay’: 0,
‘direction’: ‘top’
}
$item(“#box2”).show(‘roll’, effectOptions);

Resources (only for the curtain effect, not the expand section part):

Adding Custom Interactivity with Events

(HIDE,SHOW) is not responding with effectoption

let flipOptions = { “duration”: 350, “delay”: 0, “direction”: “left” } $w(“#line7”).hide(“flip”, flipOptions) let slideOptions = { “duration”: 350, “delay”: 0, “direction”: “top” } $w(“#box2”).hide(“slide”, slideOptions) } export function box2_mouseIn(event, $w) { let slideOptions = { “duration”: 350, “delay”: 0, “direction”: “top” } $w(“#box2”).show(“slide”, slideOptions) $w(“#line7”).show() } export function box2_mouseOut(event, $w) { let slideOpt…

[noahlovell]

I don’t believe it’s possible to apply this sort of effect the a Section, although it might be possible with code.

Depending on your editor, you may have access to CSS (Studio), which might make it possible, although I’m no CSS expert so can’t say for certain.

[Dan_Suhr]

Are you using Studio ? I just added the standard accordion and got what you are wanting.

working version here - https://dcidesigns.wixstudio.io/my-site-19