Accordeon indicator background

[cvdw]

Hi,

I’m working on an accordeon FAQ section and want the result as you can see here made by the designing agency. Is it possible to add aan background to the indicator like it is possible in a button or a header for example? And, less important, a different icon for open and close? (+ and -)?

And what does the new feature FAQ schema exacly do? I can’t see what is changing when I put it on.

THX, carel

[prakash_s]

Hello Carel,

There is no option for that by default, so I suggest you please add this custom element CSS to the Accordion —>customize —>Element CSS.

To add the custom addition and subtraction icon

$el .x-acc-header .x-acc-header-indicator .x-icon:before{
    content: "\2b";
    font-family: "FontAwesomeLight" !important;
}
$el .x-acc-header.x-active .x-acc-header-indicator .x-icon:before{
    content: "\f068";
    font-family: "FontAwesomeLight" !important;
}

To add the background color to the icon.

$el .x-acc-header span.x-acc-header-indicator{
  transform: translate3d(0, 0, 0) rotate(0deg)!important;
  background-color:#000000!important;
  border-radius: 50%;
}

$el .x-acc-header.x-active span.x-acc-header-indicator{
  transform: translate3d(0, 0, 0) rotate(0deg)!important;
    background-color:#ffffff !important;
		border-radius: 50%;
}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector.In case if you have no idea about coding you can subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[cvdw]

Thank you!

@cvdw

And what does the new feature FAQ schema exacly do? I can’t see what is changing when I put it on.

[Ismael]

Thank you for the update. The FAQ Schema option automatically generates the FAQPage JSON-LD Schema for the Accordion element.

For more info, please check this link: https://developers.google.com/search/docs/appearance/structured-data/faqpage

Best regards.

[cvdw]

THX,

One more question, I’ve set up this FAQ structure now. https://cresult.nl/qlounge/faq/
Is there a way to prevent the colomn next to make space also so it looks like this:

instead of this:

It’s by an ACF looper

[ruenel]

Hello @cvdw,

Instead of using a column for each accordion, use only Two Columns. I am not sure how these was set up. I am very interested in checking your Looper settings if I can logged in. You can create a secure note in your next reply with the following info:
– Link to your site
– WP login URL
– WP username
– WP password
– WP Administrator Role
– Confirmation that we can access and make changes to your site

To know how to create a secure note, please check this out: How The Forum Works

Best Regards.

[cvdw]

Hi,

I send you credentials by secure note and yes, I confirm you can make changes to to site

[Ismael]

Thank you for the info. We tried logging in but were locked out by Wordfence. Please disable the plugin temporarily.

We’ll check the site again once the plugin is disabled.

Best regards.

[cvdw]

Hi, I disabled now!

[Ismael]

Thank you for the update. Did you change the password for the account above? It’s invalid now.

Fout: het wachtwoord dat je hebt ingevoerd voor de gebruikersnaam xxxxxxx is onjuist. Je wachtwoord vergeten?

[cvdw]

No, I did not send you a new one!

[Ismael]

Thank you for the info.

You may need to separate the Accordion elements into two columns and create another Looper Provider. You’ll have FAQ 1-5 in the first column and 6-9 in the other – something like the following, but with the correct offset.

[cvdw]

I see but because there can be more or less FAQ’s by the ACF repeater, the number can change. Or is there a way to consume the half of the total numbers of FAQ’s to 1 column and the other half to the second column?