[Support request] GB Accordion Styling

[benchmarkgraphics]

Hello,

I’ve been tasked to recreate this website in Generatepress and Generateblocks: https://www.florettesaladfreshnessguaranteed.co.uk/faqs

I’m struggling to replicate the active/not active icons like in the example FAQs above, using the new GB Accordion block – the site will not be going live before the official release of the GB Accordion block, for now I’m just showing the client how it will work.

I have access to the old site CSS. I’ve tried to use the GB Accordion classes, with old CSS but I can’t make it work. Below it the CSS code, is there a way to make use this with the GB Accordion classes to replicate the old site active/not active icons?

.faqs {margin: 20px auto;}
.faqs .title {font-family: HandyCasualCondensed-Regular; font-weight: normal; font-style: normal; text-align: center; font-size: 28px; margin-top: 10px;   }
.faqs .faq {margin: 5px 0; }
.faqs .faq:last-child {border-bottom: none;}
.faqs .faq > a {display: block; position: relative; text-decoration: none; background: #fff; border-radius: 4px; color: #000; font-size: 28px; padding: 5px 60px; text-align:center; font-family: HandyCasualCondensed-Regular; font-weight: normal; font-style: normal;  }
.faqs .faq > div {position: relative; height: 0; overflow: hidden;}
.faqs .faq > div > div {position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: 0 20px; text-align:center; }
.faqs .faq > div > div:before {content: ""; display:block; padding-top: 1px; margin-bottom: 10px; }
.faqs .faq > div > div:after {content: ""; display:block; padding-bottom: 1px; margin-top: 10px; }
.faqs .faq > a i {position: absolute; right: 20px; top: 50%; width: 36px; margin-top: -18px; height: 0; padding: 16px 0; border: 2px solid #000; color: #000; border-radius: 50%; box-sizing: border-box; line-height: 0; text-align: center; }
.faqs .faq > a i:before {content: ""; position: absolute;  top: 50%; left: 50%; margin-top: -1px; margin-left: -6px; width: 12px; height: 2px; background: #000;}
.faqs .faq > a i:after {content: ""; position: absolute;  top: 50%; left: 50%; margin-top: -6px; margin-left: -1px; width: 2px; height: 12px; background: #000;}
.faqs .faq.open > div {height: auto;}
.faqs .faq.open > div > div {position: relative; }
.faqs .faq.open a i:after {display:none;} 
@media screen and (max-width: 600px) {
	.faqs .faq > a {font-size: 22px; padding: 5px 40px; }
	.faqs .faq > a i {width: 30px; margin-top: -15px; height: 0; padding: 13px 0; right: 10px;  }
}

The new site is on a development server, which I can’t publicly share. I have provided a link in the private area below for your use.

Thank you,
Mark

[Leo]

Hi there,

Accordion is a GB pro feature that we aren’t allowed to support here.

Can you open a support ticket in GB pro’s support system?
https://generateblocks.com/support/

Thanks!

[Author]

Posts