JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="jour"> <li id="jour0">
Aujourd'hui (lundi 5 mars)
<ul class="heuresresume" id="heuresresume0"> <li>Entre 19h35 et 19h45
<ul class="heuresdetail" id="heuresdetail0"> <li>19h35</li> <li>19h40</li> <li>19h45</li> </ul> </li> <li>Entre 20h35 et 21h00
<ul class="heuresdetail" id="heuresdetail0"> <li>20h35</li> <li>20h40</li> <li>20h45</li> <li>20h50</li> <li>20h55</li> <li>21h00</li> </ul> </li> </ul> </li> <li id="jour1">
Demain (mardi 6 mars)
<ul class="heuresresume" id="heuresresume1"> <li>Entre 20h35 et 20h45
<ul class="heuresdetail" id="heuresdetail1"> <li>20h35</li> <li>20h40</li> <li>20h45</li> </ul> </li> <li>Entre 21h35 et 22h00
<ul class="heuresdetail" id="heuresdetail1"> <li>21h35</li> <li>21h40</li> <li>21h45</li> <li>21h50</li> <li>21h55</li> <li>22h00</li> </ul> </li> </ul> </li> <li id="jour2">
Après demain (mercredi 7 mars)
<ul class="heuresresume" id="heuresresume2"> <li>Entre 20h35 et 20h45
<ul class="heuresdetail" id="heuresdetail2"> <li>20h35</li> <li>20h40</li> <li>20h45</li> </ul> </li> <li>Entre 21h35 et 22h00
<ul class="heuresdetail" id="heuresdetail2"> <li>21h35</li> <li>21h40</li> <li>21h45</li> <li>21h50</li> <li>21h55</li> <li>22h00</li> </ul> </li> </ul> </li> <li id="jour3">
Vendredi 8 mars
<ul class="heuresresume" id="heuresresume3"> <li>Entre 20h35 et 22h00
<ul class="heuresdetail" id="heuresdetail3"> <li>21h10</li> <li>21h15</li> <li>21h20</li> <li>21h25</li> <li>21h30</li> <li>21h35</li> <li>21h40</li> <li>21h45</li> <li>21h50</li> <li>21h55</li> <li>22h00</li> </ul> </li> </ul> </li> <li id="jour4">
Un autre jour
<ul class="heuresresume" id="heuresresume4"> </ul> </li> </ul>

JavaScript

$('.heuresresume').hide();
$('.heuresdetail').hide();
$('ul.jour > li').unbind('click').click(function(event) {
    event.preventDefault();
    var id = '#heuresresume' + parseInt(this.id.substr(4));
    console.log('-------------------');
    console.log(id);
    console.log($(id));
    console.log('visible :' + $(id).is(':visible'));
    console.log('hidden :' + $(id).is(':hidden'));
    if ($(id).is(':visible')) {
        console.log('visible');
        return;
    }
    $('.heuresresume :not(' + id + ')').slideUp('slow');
    $(id).slideDown('slow');
});