Folde ud bokse
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 overblik, hvis en side har meget indhold.
Sådan gør du:
Der er to forskellige måder, at lave fold-ud-elementer på:
1. Vælger du en fold-ud-container, kan du placere de elementer, du har behov for, i den – samlet under ét. Fold-ud-containeren finder du under fanebladet 'Grid elements' (se Indsæt nyt element). Metoden er anvendelig, hvis du gerne vil have mere end ét element indeni din fold-ud-container.
2. 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. Denne metode er god, hvis du kun har et element, som skal have fold-ud-funktionalitet.
1. Indsæt fold-ud-container
1. Vælg fanebladet 'Grid Elements'.
2. Vælg elementet 'Collapsible container'.
1. Giv fold-ud-elementet en overskrift – HUSK at vælge formatet 'Overskrift 2'.
2. Vælg om fold-ud-elementet skal være åbent eller lukket som udgangspunkt.
3. Gem og luk.
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 ('+ Content').
2. Vælg fold-ud for et enkelt element
1. Opret et nyt element på din side ved at trykke på ikonet '+ Content'.
2. Vælg f.eks. 'Almindeligt tekstelement'
3. Giv fold-ud-boksen en overskrift – HUSK at vælge formatet 'Overskrift 2'.
4. Indsæt indhold i tekstfeltet.
5. Klik på egenskaber for det element, du vil lave om til et fold-ud-element.
6. Skift til fanebladet 'Appearance'.
7. Fold rullemenuen under 'Frames' ud, og vælg enten 'Collapsible (open)' eller 'Collapsible (closed)'.
Linke ind til et fold-ud-element
Du kan linke direkte ind til et fold-ud-element, så det vises som åbent, når brugeren benytter dit direkte link hertil.
Når du har teksteditoren åben i TYPO3, gør du følgende:
- Marker det stykke tekst, som du vil linke fra, og klik på 'Indsæt link'-ikonet.
- Klik på fanebladet 'Side' i det vindue, der åbner.
- I feltet 'Side ID' linker du ved at indsætte side-ID og element-ID som følger: 'Side-ID#cElement-ID'. For f.eks. at linke til fold-ud-boksen over denne her vil linket skulle være 731#c3203.
Element-ID finder du ved at holde musen over ikonet ved siden af din elementoverskrift. Se, hvordan du finder ID-nummeret på en side.
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:
- I frontend markerer du et stykke tekst i fold-ud-elementet.
- Højreklik på det.
- Klik på 'Vis detaljer om elementet', 'Undersøg' eller lignende.
Herefter åbner der et vindue på din skærm, som viser koden for siden. Se billedet herunder. Det tekststykke, du har markeret, vises med gråt.
- Identificer fold-ud-elementet, som det markerede tekststykke ligger i, ved at se efter 'Collapsible' (den tekniske term for fold-ud).
- 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 lukkede fold-ud-elementer ikke vises i bokse, men i stedet afgrænses med en tynd streg.
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'.
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.