Trekkspill-komponent (accordion)

Trekkspillkomponenten, eller accordion brukes når man har mange avsnitt i en tekst, og der brukeroppgaven i hovedsak er å velge én av dem.

Accordion "pakker" tekstavsnittene sammen slik at kun overskriften synes før man klikker på den. Da åpner avsnittet seg. Det er fornuftig å bruke trekkspillkomponenten for eksempel ved listing av enheter eller avdelinger med tekstinnhold, listing av rollebeskrivelser med forklaringer etc.

Koden:

class="accordion"

Slik gjør du:

Sett koden rundt tittelen på avsnittet. Velg h2 eller h3 slik:

<h2 class="accordion">Det odontologiske fakultet</h2>

Gjenta det på alle mellomtitlene du vil inkludere i trekkspill-visningen.

Eksempel på bruk:

Det humanistiske fakultet

  • Fakultetsadministrasjonen
  • Institutt for arkeologi, konservering og historiske studier - IAKH
  • Institutt for filosofi, ide- og kunsthistorie og klassiske språk - IFIKK
  • Institutt for kulturstudier og orientalske språk - IKOS
  • Institutt for lingvistiske og nordiske studier - ILN
  • Institutt for litteratur, områdestudier og europeiske språk - ILOS
  • Institutt for medier og kommunikasjon - IMK
  • Institutt for musikkvitenskap - IMV
  • Centre for the Study of MInd in Nature - CSMN
  • Senter for flerspråklighet
  • Senter for Ibsenstudier
  • Det norske institutt i Roma
  • Det norske universitetssenter i St.Petersburg
  • Senter for fransk-norsk forskningssamarbeid innenfor samfunnsvitenskap og humaniora

Det juridiske fakultet

  • Fakultetssekretariatet
  • Institutt for kriminologi og rettsosiologi
  • Institutt for offentlig rett
  • Institutt for privatrett
  • Nordisk institutt for sjørett
  • Norsk senter for menneskerettigheter
  • Senter for europarett

Det matematisk-naturvitenskapelige fakultet

  • Fakultetssekretariatet
  • Institutt for teoretisk astrofysikk
  • Institutt for biovitenskap
  • Farmasøytisk institutt
  • Fysisk institutt
  • Institutt for geofag
  • Institutt for informatikk
  • Kjemisk institutt
  • Matematisk institutt
  • Senter for akseleratorbasert forskning og energifysikk - SAFE
  • Physics of Geological Processes - PGP
  • Centre for Ecological and Evolutionary Synthesis - CEES
  • Senter for entreprenørskap - SFE
  • Senter for innovative naturgassprosesser og produkter - inGAP
  • Senter for materialvitenskap og nanoteknologi - SMN
  • Centre of Matematics for Applications - CMA
  • Centre for Theretical and Computational Chemistry - CTCC

Det medisinske fakultet

  • Fakultetssekretariatet
  • Studieseksjonen
  • Doktorgradsseksjonen
  • Institutt for helse og samfunn
  • Institutt for klinisk medisin
  • Institutt for medisinske basalfag
  • Centre for Cancer Biomedicine
  • Centre for Immune Regulation
  • Center for Molecular Biology and Neuroscience

Det odontologiske fakultet

  • Fakultetsadministrasjonen
  • Institutt for klinisk odontologi
  • Institutt for oral biologi

Det samfunnsvitenskapelige fakultet

  • Fakultetsadministrasjonen
  • Institutt for sosiologi og samfunnsgeografi
  • Institutt for statsvitenskap
  • Psykologisk institutt
  • Sosialantropologisk institutt
  • Økonomisk institutt
  • Senter for studier av teknologi, innovasjon og kultur - TIK
  • ARENA - Senter for europaforskning
  • Senter for studier av likhet, sosial organisering og økonomisk utvikling - ESOP
  • Childwatch International
  • Oslo Summer School in Comparative Social Science Studies - OSS
  • UiO Energi

Det teologiske fakultet

  • Det teologiske fakultet

Det utdanningsvitenskapelige fakultet

  • Fakultetsadministrasjonen
  • Institutt for lærerutddanning og skoleforskning
  • Institutt for pedagogikk
  • Institutt for spesialpedagogikk
  • InterMedia
  • ProTed Senter for fremragende lærerutdanning

Direktelenke:

Hvis du ønsker en direktelenke som åpner et avsnitt kan du legge til en id på h2- eller h3-en i tillegg slik:

<h3 class="accordion" id="odont-fak">Det odontologiske fakultet</h3>

som gir denne direktelenken.

Tekst under trekkspillet

Hvis du ønsker å avslutte accordion uten å legge inn ny overskrift, f.eks. hvis du ønsker å ha et bilde eller div-element som vises under accordion, gjør du dette ved å sette inn class="accordion-end" på tag-en der du ønsker at accordion skal avsluttes.

Merk at dette kun fungerer på det nye rammeverket, så nettsteder av eldre dato må avslutte accordion med ny overskrift på samme nivå.

Publisert 15. des. 2014 10:38 - Sist endret 4. mai 2023 10:50