Se mer Se mer/mindre boks.

Struktur

<lk-show-more>
  ...
</lk-show-more>

Attributter

Merknader: må*, bør, husk, ekstra.

Attributt Tillatte verdier Default Beskrivelse
show-more-text string "Se mer"
show-less-text string "Se mindre"
collapsed-height string "10em" Det er også mulig å beskrive antall elementer som skal vises, f.eks. "2 p" eller "6 li"
button-class string "button--secondary"
fade-bottom bool true

Spalter

Spalter/slots brukes for dynamisk innhold/struktur inni komponenten. Ref. Stenciljs.com

Slot= Beskrivelse
* Elementer uten slot= attributter blir plassert inni <div class="show-more__accordion">

Eksempler

Denne komponenten er implementert som en webkomponent, og kan enkelt legges inn med en enkelt custom HTML-tag.

Tittel

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?

<lk-show-more>
  <strong> Tittel</strong>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?</p>
</lk-show-more>

<lk-show-more collapsed-height="1 p" fade-bottom="false">
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?</p>
  <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aspernatur, alias mollitia voluptatibus quam, itaque expedita provident odio nisi assumenda quisquam quaerat? Consequatur dolorem eaque, quae autem, rerum sequi mollitia distinctio quos dolorum aliquam, ipsam reprehenderit cupiditate optio dolor iusto veritatis!. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam eos ipsum eius architecto incidunt, aspernatur consequuntur quae at culpa facilis ipsa ad accusantium natus exercitationem mollitia, perspiciatis qui sunt magni labore minus in nam doloribus necessitatibus! Tempora facilis eum reiciendis?</p>
</lk-show-more>

<lk-show-more collapsed-height="6 li" fade-bottom="false" show-more-text="Se alle tjenester" show-less-text="Se færre tjenester">
  <ul class="navigation-menu__startpage grid grid--no-row-gap">

    <li class="block span-half-on-tablet standardpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Dognapnee-vakttjenester"></span>
        <div>
          <h3 class="section-title">Døgnåpne vakttjenester</h3>
          <span>Nummer til legevakt, barnevernvakt,krisesenter, vann og avløp, påkjørsel av dyr.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet standardpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Helse-og-omsorg"></span>
        <div>
          <h3 class="section-title">Koronainformasjon</h3>
          <span>Vaksinering og timebestilling. Testing og karantene. Råd, statistikk, regler og annen informasjon om koronaviruset</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Skole-og-utdanning"></span>
        <div>
          <h3 class="section-title">Skole og utdanning</h3>
          <span>Se alle skoler, SFO, kulturskole og informasjon om skolekretser og hvilke andre tilbud skolen gir.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Natur-kultur-og-fritid"></span>
        <div>
          <h3 class="section-title">Natur, kultur og fritid</h3>
          <span>Idrettsanlegg, tur og friluftsliv, attraksjoner, frivillighet, barne- og ungdomsaktiviteter, kunst og kultur, bibliotek, tilskuddsordninger og leie av lokale.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Helse-og-omsorg"></span>
        <div>
          <h3 class="section-title">Helse og omsorg</h3>
          <span>Alle tjenester relatert til helse og omsorg, som tjenestetorg, helsehjelp, helsetjenester, barnevern og eldreomsorg.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Barnehage"></span>
        <div>
          <h3 class="section-title">Barnehage</h3>
          <span>Alt om barnehagene i Lillestrøm. </span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Politikk-og-administrasjon"></span>
        <div>
          <h3 class="section-title">Politikk og administrasjon</h3>
          <span>Politikk,innsyn, postliste, administrasjon,budsjett, regnskap, for våre leverandører, beredskap.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Plan-bygg-og-eiendom"></span>
        <div>
          <h3 class="section-title">Bygg og eiendom</h3>
          <span>Alt om byggesaker, hvilke planer som gjelder og hvordan du går frem. Kart og eiendomsinformasjon.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Plan-bygg-og-eiendom"></span>
        <div>
          <h3 class="section-title">Samfunnsutvikling (planlegging)</h3>
          <span>Planer, høringer, byggeprosjekter, byutvikling og stedsutvikling.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Skatt-bevilning-og-naring"></span>
        <div>
          <h3 class="section-title">Skatt, bevilling og næring</h3>
          <span>Kommunal inkasso, kemnerkontoret, skatt, avgift, salg, skjenking og servering.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Vann-og-avlop"></span>
        <div>
          <h3 class="section-title">Vann og avløp</h3>
          <span>Avløp, vannmåler, drikkevannskvalitet, priser, arbeid på vann- og avløpsnettet.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Vei-trafikk-og-parkering"></span>
        <div>
          <h3 class="section-title">Vei, trafikk og parkering</h3>
          <span>Vei, trafikk og parkering.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Bolig-og-sosiale-tjenester"></span>
        <div>
          <h3 class="section-title">Bolig og sosiale tjenester</h3>
          <span>Kommunal bolig, bostøtte, startlån og tilskudd til å kjøpe bolig, kommunal bolig, NAV Lillestrøm, omsorgsboliger.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Landbruk-jakt-og-fiske"></span>
        <div>
          <h3 class="section-title">Landbruk, jakt og fiske</h3>
          <span>Landbruk, jordbruk og skogbruk i Lillestrøm. Jakt, fiske og vilt, klima og miljø, dyr og dyrevelferd, landbruksnæring.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Avfall-og-gjenvinning"></span>
        <div>
          <h3 class="section-title">Avfall og gjenvinning</h3>
          <span>Informasjon om renovasjonstjenesten, kildesortering, returpunkter og gjenvinningsstasjoner,  gebyr og priser.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Energi-klima-og-miljo"></span>
        <div>
          <h3 class="section-title">Energi, klima og miljø</h3>
          <span>Flom og flomberedskap, luftkvalitet, elbil og miljøvennlig transport, fjerning av oljetanker, forurensning, klima og energi,  natur og naturforvaltning.</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true" class="-Integrering-og-flyktninger"></span>
        <div>
          <h3 class="section-title">Integrering og flyktninger</h3>
          <span>Tiltak for enslige mindreårige flyktninger. Helseundersøkelse for flyktninger, asylsøkere og familiegjenforente. NAV Lillestrøm</span>
        </div>
      </a>
    </li>
    <li class="block span-half-on-tablet transportpage  span-third sp">
      <a href="#">
        <span aria-hidden="true"></span>
        <div>
          <h3 class="section-title">Om Lillestrøm kommune</h3>
          <span>Jobbe i Lillestrøm kommune. Fakta om Lillestrøm. Stedene i Lillestrøm kommune. Årsberetning. Næringsliv. Verdier og mål. Kommunedirektør. Administrasjon. Finn ansatt. </span>
        </div>
      </a>
    </li>
  </ul>
</lk-show-more>

Hvor finner jeg denne koden?