Add prefers-reduced-motion Support to the FAQ Element
Supporting `prefers-reduced-motion` is important because motion-triggered effects like smooth expand/collapse animations can cause dizziness, nausea, and disorientation for people with vestibular disorders, migraines, or motion sensitivity.
By respecting this preference with a simple CSS media query that disables the sliding transition, you ensure your FAQ remains fully functional without causing harm—turning a potentially uncomfortable experience into an inclusive, accessible one with just a few lines of code.
We often send out our newsletter with news and great offers. We will never disclose your data to third parties and you can unsubscribe from the newsletter at any time.
Unfortunately, we’re unable to offer free samples. As a retailer, we buy all magazines from their publishers at the regular trade price. However, you could contact the magazine’s publisher directly to ask if they can send you a free copy.
You can create a new account at the end of the order process or on the following page. You can view all of your orders and subscriptions in your customer account. You can also change your addresses and your password.
No, you don’t have to create an account. But there are a few advantages if you create an account.
You never have to enter your billing and shipping address again
Find all of your orders, subscriptions and addresses in your account
Download invoices of your orders
No, we don’t have a physical store location at the moment. We accept only orders through our online shop and we’re shipping all orders with the Swiss Post Service. Please visit our shipping section for more details.
From time to time you will find us at design fairs and popup markets in Switzerland. Subscribe to our newsletter and you’ll receive the latest news.
Instructions
If you are using only one FAQ element, you can paste the following CSS into the Custom CSS field of that element:
%%SELECTOR%% .bde-faq__item.is-collapsing .bde-faq__answer,
%%SELECTOR%% .bde-faq__title-tag .bde-faq__icon {
transition: none;
}
}
If you want to make it work globally, add this CSS to your stylesheet instead:
.bde-frequently-asked-questions .bde-faq__item.is-collapsing .bde-faq__answer,
.bde-frequently-asked-questions .bde-faq__title-tag .bde-faq__icon {
transition: none;
}
}
How to test the prefers-reduced-motion feature
Simply open your DevTools and set the 'Emulate CSS media feature prefers-reduced-motion' to reduce:
