📘 INSTRUKTIONER FÖR BESLUTSTRÄDET
(Denna text är dold på sidan och används som intern manual)
Detta beslutsträd är uppbyggt med Elementor-sektioner som visas och döljs med hjälp av JavaScript. Systemet kräver ingen kodändring när du bygger ut – endast att du lägger in rätt CSS‑klasser på sektioner och knappar.
–––––––––––––––––––––––
1. Varje steg är en egen Section
Alla steg i beslutsträdet skapas som separata Elementor‑sektioner.
På varje steg ska du lägga in följande CSS-klasser:
decision-tree-step
step-XXXX
XXXX är namnet på steget (t.ex. 1, akut, planerad, hud, jour, gynekologi osv).
Exempel:
decision-tree-step step-1
decision-tree-step step-akut
decision-tree-step step-planerad
Alla steg måste ha båda klasserna.
–––––––––––––––––––––––
2. Så kopplar du knappar till nästa steg
Alla logiska övergångar styrs av CSS‑klasser på knapparna, inte via länkar.
Framåtknappar
Använd dessa klasser på en knapp för att gå till ett nytt steg:
dt-button
dt-goto-XXXX
XXXX ska vara samma som i step‑klassen på målet.
Exempel:
Knappen med klassen dt-goto-akut leder till sektionen med step-akut.
–––––––––––––––––––––––
3. Tillbakaknappar
För att gå tillbaka till ett tidigare steg lägger du in:
dt-back-button
dt-back-to-XXXX
Exempel:
dt-back-button dt-back-to-1 → leder till step-1
dt-back-button dt-back-to-planerad → leder till step-planerad
–––––––––––––––––––––––
4. Så skapar du ett nytt steg
- Skapa en ny section i Elementor.
- Lägg in klasserna:
decision-tree-step step-minanygren - Gå till knappen i föregående steg → lägg in klassen:
dt-goto-minanygren - (Frivilligt) Lägg in tillbaka-knapp i det nya steget:
dt-back-button dt-back-to-föregåendesteg
Klart! Ingen kod behöver ändras.
–––––––––––––––––––––––
5. Så fungerar systemet
• Alla sektioner med decision-tree-step är dolda.
• JavaScript visar endast det steg som har klassen active.
• När du klickar på en knapp med dt-goto-XXXX visas steg-XXXX.
• När du klickar på dt-back-to-XXXX går du tillbaka till steg-XXXX.
• Du kan lägga till obegränsat många steg utan kodändringar.
–––––––––––––––––––––––
6. Felsökning
• Om allt syns: kontrollera att alla steg har klassen decision-tree-step.
• Om inget syns: kontrollera att första steget heter step-1.
• Om en knapp inte fungerar: kontrollera att dt-goto-XXXX matchar step-XXXX.
• Om styling försvinner: regenerera CSS i Elementor → Tools.
–––––––––––––––––––––––
7. Tips
• Använd korta, logiska namn på steg: step-hud, step-kirurgi, step-barn etc.
• Du kan duplicera sektioner för att spara tid.
• Systemet stödjer oändliga nivåer – bara följ samma namngivning.
–––––––––––––––––––––––
Slutsats:
All logik bygger på matchningen:
dt-goto-XXXX → step-XXXX
dt-back-to-XXXX → step-XXXX
Och att varje steg är en section med decision-tree-step.
–––––––––––––––––––––––