JSFiddle - React, Tailwind, and code Playground
HTML
<h1>Hotgeart il est trop coooool</h1>
<h2>Comments :</h2>
<div class="comments-list">
<div class="comment" id="comment_1"> <a href="#">Hotgeart</a> : Coucou c'est moi zqd qzd qzd qzd qzd zqd qzd qzd
<br>liloulol <span class="reply">Reply</span>
<form id="reply-comment">
<textarea placeholder="Ton commentaire"></textarea>
</form>
</div>
<div class="comment" id="comment_1"> <a href="#">Hotgeart</a> : J'aime les poneyssssssss §§§§§! <span class="reply">Reply</span>
<form id="reply-comment">
<textarea placeholder="Ton commentaire"></textarea>
</form>
</div>
<div class="comment" id="comment_1"> <a href="#">Hotgeart</a> : Coucou c'est moi qzdgtrhrh rthrth rthrt rh rth rthrth rt <span class="reply">Reply</span>
<form id="reply-comment">
<textarea placeholder="Ton commentaire"></textarea>
</form>
</div>
</div>
CSS
body {
background: #333;
font-family: sans-serif;
font-size: 12px;
}
a, .reply, h1 {
color: grey;
text-decoration: none;
cursor: pointer;
}
.reply {
font-size: 11px;
float: right;
display: block;
}
.comments-list {
background: #f7f7f7;
border: 1px solid #eee;
padding: 10px;
border-radius: 5px;
}
.comment {
background: #fefefe;
padding: 5px;
border-radius: 4px;
margin-bottom: 10px;
}
textarea {
width: 100%;
}
#reply-comment {
display: none;
}
JavaScript
$(".reply").click(function () {
if ($(this).next("#reply-comment").is(":visible")) {
$(this).next("#reply-comment").slideUp();
} else {
$(this).next("#reply-comment").slideDown();
}
});