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 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. Indsæt fold-ud-container
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.
2. 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
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
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:
- Marker det stykke tekst, som du vil gøre til link og klik på Indsæt link ikonet.
- Klik på fanebladet Side, i den rude, der åbner.
- 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. 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 en rude 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 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.
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.