JSFiddle - React, Tailwind, and code Playground

by kirikou12

HTML

<body>
    <div class='limit'>
        <div class='comment'>
            <div class='titre'>Titre d'un commentaire statique 1</div>
            <div class='content'>Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto</div>
            <div class='subComments'>
                <div class='reduce'>__</div>
                <div class='reduce' style="display:none;">+</div>
                <div class='comment'>
                    <div class='titre'>Titre d'un sous commentaire statique 1.1</div>
                    <div class='content'>content d'un sous commentaire statique 1.1</div>
                    <div class='subComments'>
                        <div class='reduce'>__</div>
                        <div class='reduce' style="display:none;">+</div>
                        <div class='comment'>
                            <div class='titre'>Titre d'un sous commentaire statique 1.1.1</div>
                            <div class='content'>content d'un sous commentaire statique 1.1.1</div>
                            <div class='subComments'>
                                <div class='reduce'>__</div>
                                <div class='reduce' style="display:none;">+</div>
                                <div class='comment'>
                                    <div class='titre'>Titre d'un sous commentaire statique 1.1.1.1</div>
                                    <div class='content'>content d'un sous commentaire statique 1.1.1.1</div>
                                    <div class='subComments'>
                                        <div class='reduce'>__</div>
                                        <div class='reduce' style="display:none;">+</div>
                                        <div class='comment'>
                                            <div class='titre'>Titre d'un sous commentaire statique 1.1.1.1.1</div>
                                            <div class='content'>content d'un sous...

CSS

.limit {
    //border: solid 1px blue;
    margin:0 auto;
    width:650px;
}
.comment {
    //border: solid 1px blue;
    margin: auto;
    width: 480px;
    border-radius: 6px;
    padding-left: 50px;
}
.titre {
    font-size: 1.2em;
    color: blue;
    padding: 12px;
}
.content {
    padding: 12px;
}
.subComments {
    border-top: solid 1px blue;
    width: 580px;
    float:left;
}
.reduce {
    font-size:1.4em;
    color: black;
    float:left;
    position: relative;
    cursor: pointer;
}

JavaScript

$(document).ready(function () {
    $('.subComments').on('click', '.reduce', function () {
        $(".reduce").toggle("fast");
        $(this).parent().children().not('.reduce').toggle("slow");
    });
});