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 Grid elements (se Indsæt nyt element). Denne metode er den rigtige at benytte, hvis du gerne vil gave mere end et 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 den rigtige at benytte, hvis du kun har et element, som skal have fold-ud funktionalitet.
1. Vælg Grid elements
2. Vælg Collapsible container
1. Giv fold-ud- elementet en overskrift - HUSK at vælge "Overskrift 2"
2. Vælg om fold-ud-elementet skal være åben eller lukket i udgangspunktet
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.
1. Opret et nyt element på din side ved at trykke på ikonet for Tilføj nu post på denne side
2. Vælg fx Almindeligt tekst element
3. Giv fold-ud-boksen en overskrift - HUSK at vælge "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 closed
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:
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 en rude 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 fold-ud-elementer, som er sat til at være lukkede, 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.