Fold-ud-element

Når du hurtigt skal give brugeren overblik over en stor stofmængde, kan du bruge fold-ud-elementer. Er elementet lukket, er kun overskriften synlig, mens indholdet er skjult, når siden åbnes. Det giver et ekstra klik for brugeren at få adgang til det relevante indhold, når elementet skal foldes ud – til gengæld er det hurtigt at danne sig et godt overblik, hvis det er forventeligt, at brugeren ikke skal læse hele sidens indhold.

Sådan gør du:

Vælger du en fold-ud-container, kan du i den lægge flere elementer, som du har brug for at samlet under ét. Fold-ud-containeren finder du under Grid elements (se Indsæt nyt element).

Du kan i stedet vælge at slå fold-ud-funktionaliteten til for Tekst eller Tekst & billeder elementer enkeltvis. Det gør du i elementets faneblad udseende, som vist nedenfor.  

Indsæt fold-ud-container

Elementet indsættes som alle andre elementer

  1. Vælg Grid elements
  2. Vælg Collapsible container

  1. Giv fold-ud- elementet en overskrift.
  2. Vælg om fold-ud-elementet skal være åben eller lukket i udgangspunktet.

Nu er fold-ud-elementet oprettet.

  1. Du kan nu tilføje de elementer, du har behov for ved at klikke på ikonet for tilføj sideelement. 

Vælg fold-ud for et enkelt element

1. Opret et nyt element på din side ved at trykke på ikonet for Tilføj nu post på denne side.Opret nyt element

2. Vælg fx Almindeligt tekst elementVælg almindeligt tekst element

3. Giv fold-ud-boksen en overskrift
4. Indsæt indhold i tekstfeltet

Tilføj titel og brødtekst

5. Åbn fanen Udseende og vælg Collapsible (open) eller Collapsible (closed) i dropdownen Indrykning og rammer

Vælg collapsible

Linke ind i fold-ud-element

Du kan linke direkte ind i et fold-ud-element, så det er åbent, når brugeren benytter dit link til siden. 

Når du har teksteditoren åben i TYPO3, gør du følgende: 

  1. Marker det stykke tekst, som du vil gøre til link og klik på Indsæt link ikonet.
  2. Klik på fanebladet Side, i den rude, der åbner.
  3. I feltet Side ID linker du ved at indsætte side-ID og element-ID som følgende 'Side-ID#cElement-ID'. For at linke til fold-ud-boksen over denne her, vil det være 731#c3203

Element-ID finder du ved at holde musen over ikonet ved siden af din elementoverskrift.

Linke til fold-ud-element på tværs af installationer


Ligger fold-ud-elementet, som du ønsker at linke til, et sted i backend, som du ikke har adgang til, kan du ikke bruge ovenstående metode.

I den situation finder du elementets ID ved at kigge i den kode, der ligger bag elementet. Fremgangsmåden er nogenlunde den samme uanset, hvilken browser du bruger.

  1. I frontend markerer du et stykke tekst i fold-ud-elementet.
  2. Højreklik på det.
  3. Klik på Vis detaljer om elementet, Undersøg eller lignende.

Herefter åbner der en rude på din skærm, som viser koden for siden. Se billedet herunder. Det tekststykke, du har markeret, vises med gråt. 

  1. Identificer fold-ud-elementet, som det markerede tekststykke ligger i, ved at se efter collapsible (den tekniske term for fold-ud).
  2. Find element ID'et i samme linje som 'id="cxx"'. På billedet er det c3203.

Linket skal bestå af URL'en til siden efterfulgt af '#cElement-ID'. Her vil det være http://typo3.au.dk/vejledninger/best_pratice/responsivt_design/opbygning_af_sider/#c3203

Kombiner fold-ud-container med fold-ud-elementer

Det er muligt at placere et eller flere fold-ud-elementer inden i en fold-ud-container. For at løsningen ikke bliver for klodset, er der udarbejdet et særligt design hertil, hvor fold-ud-elementer, som er sat til at være lukkede, ikke vises i bokse, men i stedet afgrænses med en tynd streg.

Design for fold-ud-elementer inden i fold-ud-container.
Design for fold-ud-elementer inden i fold-ud-container.

Sådan gør du:

Opret en fold-ud-container som beskrevet ovenfor i vejledningen "Indsæt fold-ud-container".

1. På fanebladet udseende vælger du "Collabsible new" i dropdownen indrykning og rammer.

Vælg collabsible new i dropdownen på fanebladet udseende

Gem og luk elementet. Fold-ud-containeren er oprettet.

Nu kan du oprette et eller flere fold-ud-elementer inden i fold-ud-containeren ved at følge den vejledning ovenfor, som hedder  "Vælg fold-ud for et enkelt element". Dine fold-ud-elementer vil automatisk få det særlige design.

 

1008 / {$plugin.au_config.installationId}