JSFiddle - React, Tailwind, and code Playground
HTML
<div id="content">
<h4>Tutoriels : Windows 10</h4>
<a href="" class="open">01 - Installer Windows 10.</a>
<div class="art" style="display:none;">
<p >Contenu de l'article</p>
<a href="" class="close">Fermer</a>
</div> <a href="" class="open">02 - Guide super-debloating</a>
<div class="art" >
<p >Contenu de l'article</p>
<a href="" class="close">Fermer</a>
</div> <a href="" class="open">03 - « The Next Big Tweak ».</a>
<div class="art">
<p >Contenu de l'article</p>
<a href="" class="close">Fermer</a>
</div>
<a href=""class="open">04 - Supprimer le mot de passe à la sortie de veille</a>
<div class="art">
<p >Contenu de l'article</p>
<a href="" class="close">Fermer</a>
</div>
<a href="" class="open">05 - Supprimer le mot de passe à la sortie de veille (Seconde méthode)</a>
<div class="art">
<p >Contenu de l'article</p>
<a href="" class="close">Fermer</a>
</div>
<a href="" class="open">06 - Désactiver l'accès rapide pour revenir à l'affichage classique (ce PC)</a>
<div class="art">
<p >Contenu de l'article</p>
<a href="" class="close">Fermer</a>
</div>
</div>
CSS
a {display: block;}
.art{ display:none;}
.close {color:red;}
p{text-align: center;}
JavaScript
$(function(){
$('.open').on('click', function(e){
e.preventDefault();
$(this).next('.art').show(500);
$(this).hide();
})
$('.close').on('click', function(e){
e.preventDefault();
$(this).closest('.art').hide(500).prev('.open').show();
})
})