Accordion på wikiside - Kunnskapsbasen
Accordion på wikiside
Det er flere som koder inn accordion (også kalt toggler eller trekkspill) på wikisider. Dette er ikke en del av malverket for wiki, og NTNU IT anbefaler ikke bruk av accordion på wikisider.
Samleside om innholdsarbeid på Innsida | Sider merket med wiki
Om accordion
Accordion er en del av malverket på eksterne nettsider, men ikke på wiki Innsida. For å kode accordion inn på wiki kreves html-kunnskap. Det er fort gjort å kode feil, og NTNU IT tilbyr ikke brukerstøtte.
Hvis du velger å bruke accordion: Husk at en accordion skal inneholde enkel tekst og eventuelt lenker, men aldri bilder, tabeller eller video. Accordion er ment for korte tekster og informasjon som henger sammen, men kan kategoriseres.
Slik ser en accordion ut
Tittel på meny 1
Innhold
Tittel på meny 2
Innhold
Tittel på meny 3
Innhold
Bruk HTML
Wikisiden må være i HTML (ikke Kreole) for at du skal kunne ta i bruk accordion. Dette endrer du nederst på sida. Merk at du mister formatteringen på innholdet når du endrer fra Kreole til HTML vice-a-versa.
Koden på accordion
Under finner du koden som du kan legge inn i "source".
Merk at du må tilpasse H-nivå til øvrig innhold på siden. Tittelen på selve sida er H1, og du markerer mellomtitler på nivået under som H2. Det er naturlig å ha en H2-tittel over toggleren som forklarer hva toggleren inneholder. Da blir det naturlig at titlene på hver nedtrekksmeny blir satt som H3. Men dette må du altså tilpasse til øvrig innhold.
<div class="ntnuToggler">
<h3 class="header toggler-header-collapsed toggler-header">Tittel på meny 1</h3>
<div class="content toggler-content-collapsed ntnuToggler_contents toggler-content">
<p>Innhold</p>
</div>
</div>
<div class="ntnuToggler">
<h3 class="header toggler-header-collapsed toggler-header">Tittel på meny 2</h3>
<div class="content toggler-content-collapsed ntnuToggler_contents toggler-content">
<p>Innhold</p>
</div>
</div>
<div class="ntnuToggler">
<h3 class="header toggler-header-collapsed toggler-header">Tittel på meny 3</h3>
<div class="content toggler-content-collapsed ntnuToggler_contents toggler-content">
<p>Innhold</p>
</div>
</div>
</p>
Se også
- Accordion på eksterne nettsider
- Lær mer om fordeler og ulemper (Nielsen Norman Group)