Accordions are useful for simplifying overwhelming pages or progressively disclosing steps of a process. Be conscious that accordions require user interaction to see information and think about whether the cost of that is worthwhile. If an accordion is hiding only a small amount of information then perhaps an accordion is unnecessary. Consider accordions as an accompanyment to the key content of the page, allowing the user to focus on the important content outside of the accordion, whilst having easy access to complimentary content within the accordions.
npm install @nib-components/accordion
import Accordion from '@nib-components/accordion';
|boolean||Whether there is a border at the top of the accordion.|
|boolean||Whether there is a border at the bottom of the accordion. Unlike |
|boolean||Allow more than one |
|number||Initially open an accordion item.|
|node||A set of |
|string||The accordion item title.|
|string||THe HTML element for the |
|string||The accordion item subtitle.|
|node||A system icon to render for the |
|function||Callback funtion that gets called before expanding.|
|function||Callback funtion that gets called before collapsing.|
|node||The accordion content.|
Each accordion item has the option of including a descriptive label subtitle. Subtitles help when further context is required before accordion content is disclosed. Keep subtitles short and succint.
Each accordion item also has the option of including a system icon. Only system icons should be used with accordions, and their size is fixed at
sm. Please do not use Graphic Icons as they are not designed to be used at small sizes.
If a suitable system icon cannot be found, you can request an icon be added to the library, or not include icons in your accordion.
An accordion can help breakdown long content into discreet sections helping consumption and comprehension.
The accordion component may not be fit for purpose if that means hiding important information from the user or to simply to make a page smaller or hide required content for SEO purposes.
If the primary purpose for specific accordion/s content is to rank in Google this is NOT recommended, nor fit for purpose of the SEO goal.
Avoid using an accordion to keyword stuff or hide SEO specific content that may not be relevant to the rendered content and overall user experience.
If the content is supportive to the overall SEO strategy, and the primary purpose is to assist and improve the user experience this tactic is valid.
Prior to version
5.0.3 the contents of the accordion would not be crawlable by SEO robots. New versions will have better SEO performance but still refer to earlier points for correct accordion usage.