Opening another faq doesn't close current faq which is open

Design help Animations & Interactions
1

Hi, guys.

I’ve been trying for hours but can’t seem to have an interaction where an open drop-down is closed when a closed one is opened (not a Webflow drop-down element. It’s made from divs - more like an accordion) . They are different FAQs.

I can’t use Webflows’ drop-down because the text is too long to be contained and cuts off the screen in a straight line. I even tried wrapping text with a div but to no avail. Seems like the drop-down wasn’t made to hold short paragraphs.

Currently, it’s set up with a first and second click interaction which means you’ll have to click the trigger again to make it close. I tried interactions 1.0 but unfortunately you can’t affect neccessary elements (ie…font color and other css styles) like you can with interactions 2.0.

Any suggestions?

I can’t share the link due to an NDA agreement.

1 Like
2

Hello @Wadood_Hussaini

You check this > http://perfect-accordion.webflow.io/

I think you need some custom code. See the solution here > Accordion Auto Close - #5 by Noah-R

Piter :webflow_heart:

2 Likes
3

I came across this one, but I wanted to accomplish it without using custom code. Thanks!

4

Here is another one I made that is strictly done in Webflow.

Hope you find this helpful! :webflow_heart:
-Noah

5 Likes
5

I came across this one as well but the problem is that you can’t change the text color on the one that is opened since it was created with legacy interactions.

6

You mean you want to change it as part of the interaction?

7

yes, so the font color changes on the faq that is opened. Just the title of the faq, not the answer in the faq

8

Yeah that would require a small bit of javascript.

9

Yea, I tried but not possible with legacy interactions. Thanks for the effort :+1:

1 Like
10

I see. Hmm… I will look into this.

1 Like
11

I figured it out man with very little custom CSS!
Try this here:

<style>
	.w--open > .toggle-left-wrap {
  	color: white;
  }
</style>

the class .toggle-left-wrap is the class I named that wraps the heading of the FAQ item. The class .w--open is the class that gets added via javascript for the open state.

Here is a quick video showing you what I mean.
https://www.useloom.com/share/ac79abed45e2461c9fa15179a90be714

Hope this helps! :slight_smile:
-Noah

12

Thanks!

That works but the other issue is that you can’t have long sentences as dropdown titles. On mobile, the text doesn’t wrap in the dropdown, it just keeps going. For example, if I had a title that was as long as “What is the cost saving & business advantage that my company can gain from visiting your shop and not going to another shop?” (just a random title) or longer, it doesn’t wrap. If your example was made from all divs instead, it would be perfect.

13

I figured it out.

You just need to add some custom CSS to the wrapper of the content inside the dropdown.

.class-name {
white-space: initial;
}

You can also just use the default Webflow dropdown element. If your dropdowns are stacked, you’ll need to change the dropdown content wrapper to position relative so it pushes the other dropdowns down when you open a dropdown.

See screen recording. I inspected element and added the above code the div which contains the sentence. The screen recording doesn’t show the inspect elements window.

FAQ Open Close Same Time?