Skapa så kallade Accordions

Steg 1

Lägg in koden så det blir lite vackert

• Gå till din CSS-sektion i n.nu

  (Antingen under inställningar - Ändra stilmall (css) eller på Premium - Egen mall.).

  Om du använder egen mall kommer inställningar - ändra stilmall varna med röd text.

• Scrolla längst ner i CSS-rutan.
• Se till att du står på en ny rad allra längst ner och att inget finns efter.
• Klistra in CSS-koden för FAQ-accordion (nedan).
• Glöm inte Spara

Detta ska in i CSS:

.faq { width:100%; margin: 0 auto;}
.faq details {  border: 1px solid #e6e6e6;  border-radius: 10px;  background: #fff;  margin: 12px 0;  overflow: hidden; }
.faq summary {  cursor: pointer;  list-style: none;  padding: 16px 18px;  font-weight: 600;  line-height: 1.3;  display: flex;  align-items: center;  justify-content: space-between;  gap: 12px;}
.faq summary::-webkit-details-marker {   display: none; }
.faq summary::after {   content: "+";  font-weight: 700;  font-size: 20px;  line-height: 1;  opacity: 0.8;}
.faq details[open] summary::after {  content: "−"; }
.faq details > .faq__content {  padding: 0 18px 16px 18px;  color: #222;  line-height: 1.6; }
.faq details > .faq__content p {  margin: 10px 0 0 0;}
.faq details > .faq__content p:first-child {  margin-top: 0;}
.faq details:focus-within {  outline: 2px solid rgba(0,0,0,0.12);  outline-offset: 2px;}
.faq details[open] {  border-color: #d8d8d8;}

Steg 2

Lägg in själva koden på sidan där du vill ha den.

• Gå till sidan i n.nu där du vill ha ditt "dragspel".
• Redigera i läget där du kan klistra in egen HTML. Du kommer till koden antingen genom att växla mellan Visuellt/HTML eller klicka på <> i verktygsfältet.
• Klistra in HTML-koden för FAQ-sektionen där du vill ha den. Var noga att inte hamna mellan någon < och > . Hellre mellan > och < .

<div class="faq">
  <details>
    <summary>Rubrik</summary>
    <div class="faq__content">
      <p>Innehåll</p>
    </div>
  </details>
</div>

Vill du ha flera så kopierar du från och med <details> till och med </details>.

Repetera det så många gånger inom <div>  som du behöver:

<div class="faq">
  <details>
    <summary>Rubrik 1</summary>
    <div class="faq__content">
      <p>Innehåll 1</p>
    </div>
  </details>
  <details>
    <summary>Rubrik 2</summary>
    <div class="faq__content">
      <p>Innehåll 2</p>
    </div>
  </details>
  <details>
    <summary>Rubrik 3</summary>
    <div class="faq__content">
      <p>Innehåll 3</p>
    </div>
  </details>
</div>

Spara sidan och se hur det ser ut.

Om din mall redan stylar <summary>  eller har globala regler för rubriker och listor kan det se “konstigt” ut.

• Se till att din CSS står längst ner
• Skriv till supporten som kan kika

Vanliga fel och snabba lösningar

• Det händer inget när jag klickar.

  Kontrollera att du verkligen använder <details>  och <summary>  och att HTML inte blivit omformaterad av editorn.

  
  

• Plus/minus syns inte.

  Säkerställ att du har summary::after  och att din mall inte sätter content: none  på pseudo-element.

  
  

• Stilen syns inte alls.

  Nästan alltid att CSS ligger för högt upp. Flytta den längst ner i Inställningar CSS eller Egen mall CSS.