Bricks Builder - How To Make An FAQ Accordion Bounce Effect
This is really neat looking Accordion that you can incorporate into Bricks Builder.
It has a bounce effect and most of the settings should be able to be changed in the CSS code.
Credit goes to Farhan Mubin for coming up with this.
I modified his code a little bit with the help of ChatGPT.
Bricks Template File
https://drive.google.com/file/d/1kAKQ...
CSS Code
https://docs.google.com/document/d/1t...
Bricks Community Facebook Page
/ brickscommunity
CSS Code Minus the Style tags which you'll need to add at the beginning and end.
.Accordion-Bounce {
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.05);
background: linear-gradient(180deg, #19191B 0%, #0E0E0F 100%);
box-shadow: 1rem 1rem 2rem 0.1rem rgba(0, 0, 0, 0.23), 0.1rem -0.1rem 0.1rem 0.1rem rgba(255, 255, 255, 1.03) inset;
transition: all 300ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
width: 80%;
margin: 2rem auto;
}
.Accordion-Bounce:active {
transform: scale(0.9);
}
.Accordion-Bounce h5 {
padding: 2rem;
color: white;
}
.Accordion-Bounce p {
padding: 0 2rem 2rem;
color: white;
}