In this guide, you’ll learn how to build a custom FAQ accordion in Elementor. We’ll show you how to create a design that isn’t just fully responsive, but also eye-catching enough to grab your visitors’ attention.
<style>
:root{
--radius: 20px;
/*default Accordion bg color*/
--bgcolor: #fff;
/*active Accordion bg color*/
--active-bgcolor: #40ff;
/*default Accordion icon bg color*/
--icon-bgcolor: #40ff;
/*active Accordion bg color*/
--active-icon-bgcolor: #fff;
}
.twd-faq .e-n-accordion-item{
background: var(--bgcolor);
border-radius: var(--radius);
transition: all 0.3s;
}
.twd-faq .e-n-accordion-item[open]{
background: var(--active-bgcolor);
box-shadow: 0px 5px 20px rgba(0,0,0,0.1);
transition: all 0.3s;
}
.twd-faq .e-n-accordion-item-title-icon{
background: var(--icon-bgcolor);
padding: 5px;
border-radius: 5px;
}
.twd-faq .e-n-accordion-item[open] .e-n-accordion-item-title-icon{
background: var(--active-icon-bgcolor);
}
</style>