Expandables er komponenter for å kollapse og ekspandere innhold.
<ExpandablePaneltitle="Kollektivreisende"><Paragraph> For de reisende tilbyr Entur en nasjonal reiseplanlegger, der man får oppdaterte reiseforslag for alle kollektivreiser i Norge. Denne løsningen er gratis å bruke og konkurransenøytral.</Paragraph></ExpandablePanel>
Når bruker du Expandable
Expandable-komponenter brukes for å skjule innhold som ikke alltid er relevant, slik at siden blir ryddigere. Brukeren velger selv hva de vil se.
<ExpandablePaneltitle="Kollektivreisende"><Paragraph> For de reisende tilbyr Entur en nasjonal reiseplanlegger, der man får oppdaterte reiseforslag for alle kollektivreiser i Norge.</Paragraph></ExpandablePanel>
ExpandablePanel vs. Accordion
Bruk ExpandablePanel for enkeltstående seksjoner. Bruk Accordion når flere seksjoner hører sammen og bare én bør være åpen om gangen. Se Utvikling-fanen for implementering.
<Accordion><AccordionItemtitle="Reiser"id="reiser"><Paragraph>Informasjon om reiser.</Paragraph></AccordionItem><AccordionItemtitle="Billetter"id="billetter"><Paragraph>Informasjon om billetter.</Paragraph></AccordionItem><AccordionItemtitle="Priser"id="priser"><Paragraph>Informasjon om priser.</Paragraph></AccordionItem></Accordion>
ExpandableText
For lange tekstblokker som bør vise bare en del av innholdet først, bruk ExpandableText.
<ExpandableTexttitle="Les mer om kollektivtransport"> For de reisende tilbyr Entur en nasjonal reiseplanlegger, der man får oppdaterte reiseforslag for alle kollektivreiser i Norge. Denne løsningen er gratis å bruke og konkurransenøytral. Uansett om reisen består av flere delstrekninger, vil Entur gjøre det mulig å kjøpe billetter til hele reisen med ett tastetrykk.</ExpandableText>
Universell utforming
Alle expand-komponenter bruker aria-expanded og aria-controls for tilgjengelig åpne/lukke-funksjonalitet. Kollapset innhold er markert med aria-hidden="true" og inert.
