JSFiddle - React, Tailwind, and code Playground

by Trisox

HTML

<ul class="faqLijst"><li class="faq"><div class="vraag"><span class="closed"></span><a href="#">Volgens de levertijd, aangegeven op de website, had ik mijn bestelling al moeten ontvangen. Dat is nog niet het geval. Vanwaar het verschil in aangegeven en werkelijke levertijd?</a></div><div class="answer" style="display: none;"><p>De levertijden zoals aangegeven op internet zijn verwachte levertijden, gebaseerd op onze voorraden en de levertijden van onze leveranciers. De meeste leveranciers zijn zeer nauwkeurig in hun levertijden, maar dat geldt helaas niet voor alle. In zo'n geval kan de verwachte levertijd van een bestelling ook verschillen van de daadwerkelijke levertijd. Wij doen uiteraard onze best om de levertijd zo accuraat mogelijk weer te geven. Wanneer de levertijd belangrijk is, verzoeken wij u deze bij uw bestelling op te geven.</p></div></li><li class="faq"><div class="vraag"><span class="open"></span><a href="#">Hoeveel bedragen de verzendkosten?</a></div><div class="answer" style="display: block;"><p>Of en hoeveel verzendkosten u betaalt hangt af van de leveringsvoorwaarden die met u zijn afgesproken. Neem contact met ons op voor meer informatie over uw persoonlijke informatiepakket.&nbsp;</p></div></li><li class="faq"><div class="vraag"><span class="closed"></span><a href="#">De totaalprijs van de factuur valt lager / hoger uit dan de prijs waarvoor de bestelling is geplaatst. Hoe is dit prijsverschil te verklaren?</a></div><div class="answer" style="display: none;"><p>De prijzen zoals aangegeven op onze webpagina en onze e-mail zijn onder voorbehoud. Prijsafwijkingen kunnen verschillende oorzaken hebben. Uiteraard kunt u bij vragen over facturen altijd contact met ons opnemen.&nbsp;</p></div></li><li class="faq"><div class="vraag"><span class="closed"></span><a href="#">Ik heb van mijn bestelling nog geen e-mail bevestiging ontvangen. Klopt dit?</a></div><div class="answer"><p>Nadat u uw bestelling geplaatst heeft, krijgt u hier binnen 1 werkdag...

CSS

.faqLijst .answer {
    display: none;
    font-weight: 600;
    padding: 10px 0 0 37px;
}

div{margin-top:10px;}

JavaScript

$(".faq").live('click',function(event){
    event.preventDefault();
    var $this = $(this);
    if($(".vraag .closed",$this)){
        $(".answer").slideUp();
        $(".vraag span").removeClass('open').addClass('closed');
        $this.find(".answer").slideDown();
        $this.find(".vraag span").removeClass('closed').addClass('open');
    }
});