JSFiddle - React, Tailwind, and code Playground

by Yahiko

HTML

<div class="details">
    <div class="onglets clear" id="onglets_infos" style="position: relative;">
        <ul class="nav_onglets">
            <li id="onglet_infos" class="on"><a href="#bloc_infos"><span class="lien">Infos match</span><span class="fin"></span></a>
            </li>
            <li id="onglet_statistiques" class=""><a href="#bloc_statistiques"><span class="lien">Statistiques</span><span class="fin"></span></a>
            </li>
            <li id="onglet_statistiquesJoueurs" class=""><a href="#bloc_statistiquesJoueurs"><span class="lien">Statistiques joueurs</span><span class="fin"></span></a>
            </li>
            <li id="onglet_videoMatch" class=""><a href="#bloc_videoMatch"><span class="lien">Résumé vidéo</span><span class="fin"></span></a>
            </li>
        </ul>
        <div id="bloc_infos" class="onglets_infos" style="display: block;">
            <div id="bloc_infosMatch_load" class="load"></div>
            <div id="bloc_infosMatch_data"></div>
        </div>
        <!-- <ul class="nav_onglets">
        <li id="onglet_infos" class="on compos_coup_envoi">
          <a href="#bloc_infos">
            <span class="lien">Composition des équipes au coup d'envoi</span>
            <span class="fin"></span>
          </a>
        </li>
      </ul>
    -->
        <!-- <ul class="nav_onglets">
        <li id="onglet_infos" class="on"><a href="#bloc_infos"><span class="lien">Infos match</span><span class="fin"></span></a></li>
        <li id="onglet_resume_video" class=""><a href="#bloc_resume_video"><span class="lien">Résumé vidéo</span><span class="fin"></span></a></li>
      </ul>
    -->
        <div id="bloc_statistiques" class="onglets_infos" style="display: none;">
            <div id="bloc_statsMatch_load" class="load"></div>
            <div id="bloc_statsMatch_data"></div>
        </div>
        <div id="bloc_statistiquesJoueurs" class="onglets_infos" style="display: none;">
            <div...

JavaScript

var matchId = $('#match_id_hidden').val();
var domId = $('#dom_id_hidden').val();
var extId = $('#ext_id_hidden').val();
var live = $('#live_hidden').val();
var domNomClub = $('#dom_nom_club_hidden').val();
var extNomClub = $('#ext_nom_club_hidden').val();
$('#bloc_infosMatch_load').fadeIn("fast", function () {
    $('#bloc_infosMatch_data').load('showInfosMatch?matchId=' + matchId + '&domId=' + domId + '&extId=' + extId + '&live=' + live + '&domNomClub=' + domNomClub + '&extNomClub=' + extNomClub, function () {
        $('#bloc_infosMatch_load').fadeOut("fast");
        $('#bloc_infosMatch_data').fadeTo("fast", 1);
    });
});