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.
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. 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').
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)'.
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:
Element-ID finder du ved at holde musen over ikonet ved siden af din elementoverskrift. Se, hvordan du finder ID-nummeret på en side.
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:
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.
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
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.
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.