Streaming live at 10am (PST)

Accordion Sections


#1

Hi,

I want to create accordeon sections with interactions. I am trying to achieve something like this: https://preview.webflow.com/preview/accordion-menu-tutorial?preview=f91ada51b6a232f8ae0516c43d557472

But with ix2 interactions, because I cannot put divs inside dropdown elements. When you would click on a section, its headline would become white, and the section background, black. Problem is how to target the section that’s open to close it?

How should I approach this?

Thanks for the help


Here is my public share link: LINK
(how to access public share link)


#2

This video will walk you through using interactions to hide/show https://university.webflow.com/article/show-hide-elements-on-click.

Using iX2 set the 1st click to reveal the element and the 2nd click interaction to be an animation that hides the element.

You can also review this forum post where I recently helped someone else with an FAQ page with accordion elements.


#3

Thanks for the link. I got the “accordion” working.

I have another question though: I want the open section to load a background image, but only on the mouse click interaction. I don’t think you can directly change the bg image property in interactions, and I thought maybe I could set a background image on my section even when it’s closed, and add an opacity animation to the bc image when it’s opened, but I don’t think you can do that either.

Now it’s changing the background color to black, and the text to white, basically inverting the two. That was my goal and this is fine, but my final design has a background image on the section that’s almost transparent. I will also restructure to be full width sections so the background fills the whole width of the page. But my only remaining issue here is to load a bcg image on mouse click.

This is on the Locations page of my project, and the interaction is only on the “PLACE VILLE-MARIE” heading: https://preview.webflow.com/preview/maison-privee?preview=7ebf73ceb50d0f13e53b30f506cd70f1

Thanks for the help


#4

Hey @Charlie_Baron

I think this is the basics of what you’d like to achieve, right?

The key to making this interaction work is to have the image be the background image of a separate div.
Set the position to absolute and full. Note that the parent div must be set to position relative. Set the background image. The cover setting will work best with tiling off.

32

Then in your interaction it’s just a matter of animating the opacity of the new div.
Hope that helps. Happy designing!


#5

Awesome!! Thanks a lot