JSFiddle - React, Tailwind, and code Playground

by fparent

HTML

<div class="box-top">
    <h2>Trouve ici les réponses aux questions les plus fréquentes.</h2>
</div>

<div class="box-bottom">
    <ul class="toggle-list no-bullet">
        <li class="toggle-list-item">
            <a href="#inscription" class="toggle-list-link">Comment puis-je m’inscrire au SMAT?</a>
            <div class="toggle-list-content hidden">
                <ol>
                    <li>Tout d’abord, rends-toi sur la page d’<a href="/fr/inscription">inscription</a>.</li>
                    <li>Ensuite, remplis le formulaire en fournissant ton numéro de téléphone cellulaire et appuie sur <b>&laquo;&nbsp;Valider&nbsp;&raquo;</b>.</li>
                    <li>Lis et accepte les termes de participation.</li>
                    <li>
                        En moins d’une heure, tu recevras un message texte du SMAT. Tu dois répondre par message texte avec le mot 
                        <b>&laquo;&nbsp;ok&nbsp;&raquo;</b> pour confirmer ton inscription. 
                    </li>
                </ol>
            </div>
        </li>
        <li class="toggle-list-item">
            <a href="#besoin-cellulaire" class="toggle-list-link">Ai-je besoin d’un téléphone cellulaire pour m’abonner au SMAT?</a>
            <div class="toggle-list-content hidden">
                <p>
                    Oui. Le SMAT t’offre des trucs, de l’info et des encouragements par message texte. Il est donc essentiel que tu fournisses 
                    ton numéro de téléphone cellulaire lors de l’inscription. Si tu ne possèdes pas de téléphone cellulaire, tu peux toujours 
                    obtenir du soutien en appelant la ligne j’Arrête au <span class="nobr">1 866 527-7383</span> ou encore en t’inscrivant 
                    sur <a href="http://jarrete.qc.ca/" target="_blank">jarrete.qc.ca</a>.
                </p>
            </div>
        </li>
        <li class="toggle-list-item">
            <a href="#ok" class="toggle-list-link">J’ai envoyé...

CSS

.hidden, .hide {
	display: none;
}


.visible, .show {
	display: block;
}

JavaScript

$(function () {
    
    // Bind an event to window.onhashchange that, when the hash changes, gets the
    // hash and adds the class "selected" to any matching nav link.
    $(window).bind('hashchange', function () {
        
        var hash = location.hash;
        
        // Iterate over all nav links, setting the "selected" class as-appropriate.
        $('.toggle-list-item a').each(function () {
            var that = $(this);
            
            //hide all
            that.removeClass('active open');
            that.next().removeClass('visible');
            that.next().addClass('hidden');
            
            //show #
            if (that.attr('href') === hash) {
                that.addClass('active open');
                that.next().removeClass('hidden');
                that.next().addClass('visible');
            }
        });
    });
    
    // Since the event is only triggered when the hash changes, we need to trigger
    // the event now, to handle the hash the page may have loaded with.
    $(window).trigger('hashchange'); 
});