How to close an element when clicking another button to open a different element?

I believe this would have to be done with custom code as well. The idea looks like this.
Screenshot 2023-01-11 113656

I’m trying to make it so when I click on any of the other buttons, the active slide Div will slide down while the one clicked on will slide up!

I have it setup where the first two buttons are working but trying to figure this out before I create the other 3 element buttons to work.

If anyone could take a look and help me out that would be AMAZING! Quite a unique request I feel like. I’ve been looking into jquery and stuff in order to figure it out but I’m little stumped

Thanks for any help, Austin :slight_smile:


Here is my public share link: (Webflow - Northview Church)
(how to access public share link)

Hey Austin,

For simple hide-show, with no animation, script makes that trivial.
I’d recommend you set it up with attributes, like this;

All of the HTML, JS and CSS can be accessed in the top tabs, and I’ve commented to make the design clear.

In your particular layout here, a Webflow tab element would probably work similarly, and might give you some good interaction options;

If that doesn’t get you what you want, you can build it from scratch using interactions;
Use the accordion as a model.

1 Like

Thanks for the response! I’m working on a custom accordian as that would work best I believe In my situation! The tab change has to have an open state that I can’t figure out!

Still running into 1 problem though with that custom accordian!

I cannot make it so the dropdown List shows above the Dropdown Toggle! So when I animate it moving up it goes over top the buttons and text. I’ve tried z-index on many things but it seems to not work! Do you have any ideas with this? You’ve been such a great help! Thanks so much.

image

https://preview.webflow.com/preview/navbox-test?utm_medium=preview_link&utm_source=designer&utm_content=navbox-test&preview=5947999549b890178d5f2eea8736af55&workflow=preview