Component Overview: Accessible Accordion & Toggle

[@ReubenHochstetler]

Automatically adding the schema is literally amazing. I love Frames.

[@AutomaticCSS]

Yes sir!

[@davidwalls2304]

Kevin & ACSS/Frames team, this is EXCELLENT! Easy to understand, simple to configure, powerful output. It doesn't get much better than this.

[@AutomaticCSS]

🙏🙏🙏

[@LupusDesign]

Kevin & Team: what's so impressive is the attention given to every detail. Thank you for this very impressive accordion component and how to configure and style. Now back to your L15 lesson on Components and Templates!

[@markpeters2254]

Besides the great content, I also admire the 'uhh' less presentation style. Gonna use this component today, thanks, Kevin!

[@johnboyd8053]

Kevin & Team, this Component is perfect timing. I have been struggling to try to make Bricks Accordion work and there are so many issues. This component is the perfect fit and very easy to mold into my project. Thanks, and keep them coming.

[@AutomaticCSS]

Our pleasure!

[@ted-e-baer]

Very nice tutorial. Thank you, Kevin and the rest of the ACSS team. Job well done. But more importantly, well explained. I for one appreciate these tutorials. Cheers.

[@AmandaLucaseu]

Absolutely fantastic Kevin 🤗 can’t wait to use it

[@isaurasotoca]

I have been using the accordion component on the very last two projects I have been working on! Everything is absolutely amazing... from the schema toggle to the non-intrusive styling! Nice one 😊

[@AutomaticCSS]

Good to hear!

[@ScottMackey]

Oh Boi, Kevin you and the dream team are helping keep the dream of correct done, front end dev alive! I’ve built accessible, well developed components in JS frameworks but usually they need some tweaking for reusablility but you’ve covered just about everything! Thanks again 😊

[@spaciaarchviz8486]

This is a great addition. Can the icon be changed from arrow to say + and toggle state as - ?

[@AutomaticCSS]

Yes it supports any icon.

[@toby-green]

The accordion is great to work with. Have set it up so that buttons in the 'Feature Card Romeo' on another page open specific sliders. The only niggle is that Close Previous is not closing the slider that was opened on navigating to the page when another slider is accessed ie. 2 are open simultaneously. The Close previous works on any manually opened sliders but not the one opened with a #id in the url.

[@derekshort]

Great video! Thanks!

[@rubengarciajr]

Stop creating amazing content !!!

[@AutomaticCSS]

Can't stop, won't stop.

[@thorsten-roever]

Thanks

[@suzannebaker8053]

One click schema! 🤯Amazing, implementing now!

[@AutomaticCSS]

Yep!

[@fabiamc]

Huge!

[@SingaporeMathsAcademyUK]

I know the documentation is being built but currently there is a message "Element "fr-accordion" doesn't exist?

[@tolkienomics]

Great video, nice to have this! In a query loop, how would you target a specific accordion in order to link to it or vary its settings from the rest?

[@AutomaticCSS]

Bricks would need to add a way to add custom IDs to query loop items. Or you can choose to not turn off the default IDs Bricks places on all elements.

[@philipplunch8526]

Nice! Is it possible to have different custom Icons for active/inactive? Can you please include the possibility to Style the active Border in the TOC component as well?

[@muzik667]

Hay Kevin. In Icon Default, I'm missing the wrapper size field in ICON - DEFAULT. Is there any setting in Bricks that I should be change? I'm a member in your inner circle too. Thanks

[@AutomaticCSS]

I'm using a newer version than you are. You'll have the new version later in August and then you'll have control over all that stuff.

[@muzik667]

@@AutomaticCSS Thanks man.. Appreciate it.

[@marshwebsolutions]

Great work as always Kevin! For some reason, the FAQ schema isn't appearing when I run a page in Google's Rich Results Test. It appears in my Firefox Browser Inspector.

[@AutomaticCSS]

Feel free to post a link in the ACSS community so we can take a look.

[@vigi1ante1]

I don't see the Transform property in the accordion's "Head Styling > Icon - Active" section. Am I missing something?

[@AutomaticCSS]

You need the next version that isn't out yet ;) -- The one in this video is an unreleased Alpha. You'll have access very soon.

[@markpeters2254]

@@AutomaticCSS Same for the ul TAG I guess?

[@noe.galarza]

Hi Kevin. Thank you. It's amazing. But could you use the Query Loop to display an ordered list of FAQs where their numbering would automatically reorder when you changed the order of the FAQ CPTs? I don't know if I explain myself. Also, would there be the possibility that the component assigns the subnumbering automatically for the possible contents of the body of each item according to the numbering of the item? That is to say: 1. First question. 1.1. First subquestion. 1.2. Second subquestion. 2. Second question. ... And so on. Thank you.

[@AutomaticCSS]

Yes, you can auto-number them. I'd have to look into auto-numbering the children, though. Not sure off the top of my head.

[@PswACC]

1. Is it possible to change the FAQ icon? 2. Can accordions be set to toggle open and close individually upon clicking, without automatically closing the others when clicked?

[@AutomaticCSS]

1. Yes. 2. Yes.

[@kappesante]

insane

[@davidnickson5043]

Incredible video!! I am using a + for the icon, is there a way to make it change to a line when open?

[@AutomaticCSS]

Yes, with bricks interactions.

[@JamesJosephFinn]

Un-styled, accessible, and semantically coded common web-design patterns as pluggable components in Frames introduces a heretofore unseen level of design capability to the WP dashboard. You're breaking new ground.

[@AutomaticCSS]

Thx, we think so, too!

[@michaelvandinther]

Kevin/ACSS. I dont see Additional Settings > Tag?

[@AutomaticCSS]

Wait for the august update.

[@BGdev305]

Why is it your components thus far are so much more buttery smooth quick and easier than Bricks native elements? Like with your modal & trigger component I don't even look at Brick's own convoluted new or old nav menu. Now with this accordion, I have some use ideas for it that isn't even for "traditional" accordion use! That one click auto schema is MAJOR! Having to do that manually is very very time consuming. That ONE functionality alone is actually worth the cost of Frames just in the time saved from having to manually do this. One note / question, in ref to the 'scroll to hash'.. would be nice to also have url parameter functionality, ?accordian_item_title for us that MUST use query parameters / query strings ala tracking. For me, tracking from domain to domain and for campaign tracking ?parameter is a must.

[@AutomaticCSS]

That's our mission --- make the best components available anywhere. More features + better UX. Glad you're noticing!

[@kareem2928]

Flexible element!!! Well done. When the components will be released?

[@AutomaticCSS]

They've been available for a while now!

[@kareem2928]

@@AutomaticCSS I know, but still it says Beta & RC!

[@laufal]

Re- scroll hash, a target blank would be a nice addition Kevin. Also, if the destination url later redirects to another url, will the hash link still work? Best! EDIT: also, could we have a custom offset (because of various header heights)?

[@AutomaticCSS]

Offset is already part of ACSS. Target blank should already be possible as well.

[@laufal]

@@AutomaticCSS I meant offset for the scroll hash (or do you mean the one from ACSS can be used here?). Also, I was surprised that putting a static URL before #id didn't bother you. Isn't it the definition of chump behaviour and can you do anything about it (i.e. dynamic page instead)? 😋

[@AutomaticCSS]

@@laufal I used a relative URL, not a static URL. And yes, ACSS's scroll offset will work with this by default.

[@laufal]

@@AutomaticCSS Awesome. A relative url? Sure but if the URL is later modified, will it take into account automatically or will the link lead to a 404 or 301 but without a functioning hash scroll?

[@AutomaticCSS]

@@laufal That's what redirects are for. There are no tokens for URLs.

[@eucalyptech]

Such powerful components, thank you Frames team ! But such a shame we cannot have Frames with Oxygen builder 🥲