I’m really struggling to change to accordion header, I’ve tried everything and it just stays blue for the active one. Ideally trying to get something similar to @wolfganghofer amazing FAQ here: https://www.social-webwork.at but 2 hours in and still unable to get anywhere.
This is one of the current limitations with the class editor. It sanitises way too much, so we can not use attributes in our selectors. (@norm, it would be so great if we could use attributes here.)
So you have to use the additional CSS input zone in the code editor.
.card-header a[aria-expanded='true']{
background-color: blue;
}This will apply the background colour blue to the header link, when the accordion is expanded. You need to set the link to full span and sort out the padding in the header.
The other option is to add the accordion classes that are standard bootstrap. Not sure why the Blocs accordion does it non-standard. - Using this method is what norm suggested futher up the thread here
1 Like
That works, thank you!! 
One minor issue remaining, when I load the page, all the headers are blue as if they are active, once you click on to open one, then all the others revert to white and then the active one stays blue.
Looks like that bug I reported ages ago was never fixed @norm
aria-expanded = true when they are closed.
Seems like if you set another one to be active, the aria attribute is still set as false for that one, but true for the first one 
What a mess.
1 Like
Hi! I used a few classes and some Javascript in the page settings:
<script>$(document).ready(function(){$(".collapse").on("show.bs.collapse",function(){$(this).prev().removeClass("faq card-header").addClass("green-header")}),$(".collapse").on("hide.bs.collapse",function(){$(this).prev().removeClass("green-header").addClass("faq card-header")})});</script>
Hope this helps!
1 Like
This data attribute is not managed by Blocs for this, but I’ll get support for that added.
It’s worth noting that you can currently access the data attributes for these accordion links and just manually tweak the values visually inside of Blocs.
1 Like
The initial state is. Yes Bootstrap will toggle the aria expanded value on interaction. But as far as I am aware the docs suggest setting the initial state. So yeah this part is blocs.
I’m aware. I actually have a snippet of JavaScript that sets it on page load to avoid the extra unnecessary steps when there is a sidebar setting. So I wasn’t aware this hadn’t been addressed.