Skapa en FAQ-sida med frågor och svar som kan expanderas

Nedan följer ett exempel på hur det går att presentera frågor och svar på ett kompakt sätt. När en besökare surfar in på sidan visas initialt endast frågorna. Genom att klicka på en fråga expanderas och visas dess svar under.

Exempel: http://demo.e37.se/sv/faq

Gör så här i admin:

1. Skapa först en ny, tom sida genom att gå till:
   Webbplats -> Sidor
2. Klicka på knappen Ny sida.
3. Ange t.ex. "Frågor och svar" under sidans Titel och klicka sedan på Spara.
4. Klicka på den nya sidan, t.ex. "Frågor och Svar" du nyss skapade.
5. Klicka på knappen Lägg till Widget.
6. Välj widgeten Fri HTML-kod och klicka på knappen Nästa.
7. Ange t.ex. "Frågor och svar" som Rubrik och välj Rubrik H1 under Rubrikmall.
8. Välj fliken Widgetinställningar.
9. Kopiera och klistra in följande i fältet för HTML-kod:
   

   <script type="text/javascript">
    $(document).ready(function () {
    $('.faq dd').hide();
    $('.faq dt').hover(function(){$(this).addClass('hover')},function(){$(this).removeClass('hover')}).click(function(){ 
    $(this).next().slideToggle('normal'); 
    }); 
   });
   </script>
   
   <dl class="faq">
   
   <dt>Fråga</dt>
   <dd>Svar</dd>
   
   <dt>Fråga</dt>
   <dd>Svar</dd>
   
   <dt>Fråga</dt>
   <dd>Svar</dd>
   
   </dl>
   

10. Välj fliken CSS.
11. Kopiera och klistra in följande i fältet för CSS-kod:
    

    dl {margin-bottom:0px}
    dl,dt,dd {padding:0;margin:0}
    .faq dt {position:relative;line-height:180%;}
    .faq dd {padding:10px;margin:10px 0px;position:relative;background-color:#f7f7f9;}
    .faq .hover {text-decoration:underline;}
    .faq dt:hover {cursor:pointer}

12. Välj fliken Widgetinställningar igen.
13. Fyll i frågorna och svaren. Varje fråga skrivs inom <dt> och </dt>, medan svaret skrivs inom <dd> och </dd>. Du kan ange hur många frågor och svar som helst. Syntaxen för en fråga och svar se alltså ut enligt följande:
    

    <dt>Fråga</dt>
    <dd>Svar</dd>

14. Klicka på Spara när nu är klar.