Component Overview: Accessible Accordion & Toggle

Поделиться
HTML-код
  • Опубликовано: 4 окт 2024

Комментарии • 63

  • @ReubenHochstetler
    @ReubenHochstetler Год назад +6

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

  • @davidwalls2304
    @davidwalls2304 Год назад +5

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

  • @spaciaarchviz8486
    @spaciaarchviz8486 Год назад +4

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

    • @AutomaticCSS
      @AutomaticCSS  Год назад +2

      Yes it supports any icon.

    • @GregPerham
      @GregPerham 9 дней назад

      "Supports"? What does that mean? It appears not to provide UI for setting the icon

  • @markpeters2254
    @markpeters2254 Год назад

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

  • @LupusDesign
    @LupusDesign Год назад +1

    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!

  • @johnboyd8053
    @johnboyd8053 Год назад +1

    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.

  • @AmandaLucaseu
    @AmandaLucaseu Год назад

    Absolutely fantastic Kevin 🤗 can’t wait to use it

  • @ted-e-baer
    @ted-e-baer Год назад +1

    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.

  • @isaurasotoca
    @isaurasotoca Год назад +1

    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 😊

  • @toby-green
    @toby-green 11 месяцев назад

    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.

  • @rubengarciajr
    @rubengarciajr Год назад +1

    Stop creating amazing content !!!

  • @ScottMackey
    @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 😊

  • @derekshort
    @derekshort Год назад

    Great video! Thanks!

  • @suzannebaker8053
    @suzannebaker8053 Год назад

    One click schema! 🤯Amazing, implementing now!

  • @GregPerham
    @GregPerham 9 дней назад

    Scroll to hash is good for a long list of faqs, but would be even better if it could scroll to the parent (or possibly even a heading/section before/around the component) and just open the appropriate item

  • @tolkienomics
    @tolkienomics Год назад +1

    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
      @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.

  • @thorsten-roever
    @thorsten-roever 3 месяца назад

    Thanks

  • @fabiamc
    @fabiamc Год назад

    Huge!

  • @philipplunch8526
    @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?

  • @kareem2928
    @kareem2928 Год назад

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

    • @AutomaticCSS
      @AutomaticCSS  Год назад

      They've been available for a while now!

    • @kareem2928
      @kareem2928 Год назад

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

  • @marshwebsolutions
    @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
      @AutomaticCSS  Год назад

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

  • @noe.galarza
    @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
      @AutomaticCSS  Год назад +1

      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.

  • @davidnickson5043
    @davidnickson5043 Год назад

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

  • @BGdev305
    @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
      @AutomaticCSS  Год назад

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

  • @SingaporeMathsAcademyUK
    @SingaporeMathsAcademyUK Месяц назад

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

    • @AutomaticCSS
      @AutomaticCSS  4 дня назад +1

      You have to enable the accordion component

  • @PswACC
    @PswACC 10 месяцев назад

    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?

  • @muzik667
    @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
      @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
      @muzik667 Год назад

      @@AutomaticCSS Thanks man.. Appreciate it.

  • @vigi1ante1
    @vigi1ante1 Год назад

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

    • @AutomaticCSS
      @AutomaticCSS  Год назад +2

      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
      @markpeters2254 Год назад +1

      @@AutomaticCSS Same for the ul TAG I guess?

  • @kappesante
    @kappesante Год назад

    insane

  • @JamesJosephFinn
    @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.

  • @laufal
    @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
      @AutomaticCSS  Год назад +1

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

    • @laufal
      @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
      @AutomaticCSS  Год назад

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

    • @laufal
      @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
      @AutomaticCSS  Год назад

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

  • @michaelvandinther
    @michaelvandinther Год назад

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

    • @AutomaticCSS
      @AutomaticCSS  Год назад +1

      Wait for the august update.

    • @GregPerham
      @GregPerham 9 дней назад

      The only documentation is this video. I was also concerned by not seeing an option for definition list.

  • @eucalyptech
    @eucalyptech Год назад

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