JSFiddle - React, Tailwind, and code Playground

by love4all1080

HTML

<div id="comments">
    <ul id="post-list">
        <!---------------->
        <li class="post">
            <div class="post-content">
                <div class="avatar">avatar_IMG</div>                    
                <div class="post-body">
                    <header>
                        <span>
                            <a href="#" class="visibility-toggle" >Hide</a>
                            <a href="#" class="visibility-toggle" style="display: none; ">Show</a>
                        </span>                        
                    </header>
                    <div class="post-message">
                        Hello, how are you ! Are you happy.
                    </div>
                </div>
            </div>
            <ul class="children">
                <li class="post">
                    <div class="post-content">
                        <div class="avatar">avatar_IMG</div>                    
                        <div class="post-body">
                            <header>
                                <span>
                                    <a href="#" class="visibility-toggle" >Hide</a>
                                    <a href="#" class="visibility-toggle" style="display: none; ">Show</a>
                                </span>                        
                            </header>
                            <div class="post-message">
                                Hello, how are you ! Are you happy.
                            </div>
                        </div>
                    </div>
                    <ul class="children">
                        <!--another reply--->
                    </ul>
                </li>
            </ul>
        </li> 
        
        <li class="post">
            <div class="post-content">
                <div class="avatar">avatar_IMG</div>                    
                <div class="post-body">
                    <header>
                        <span>
     ...

CSS

.post-list > .post {
    padding-left: 46px;
    padding-bottom: 10px;
}
.post-content { 
    margin: 0 0 24px;
 
}

.post-list .post .post {
    padding-left: 34px;
    zoom: 1;
}

JavaScript

$(function(){
    $('a.visibility-toggle').click(function() {
        $(this).hide();
        $(this).siblings().show();
        $(this).parents().eq(4).addClass('collapsed');
        return false;
    });
});