JSFiddle - React, Tailwind, and code Playground

by OsamaMohamed

HTML

<div class="main">
    <div class="sub">
        <a href="#" class="show_comments" >Show comments #1</a>
        <div class="comments" >Comments #1</div>
    </div> <!-- sub end -->    
</div> <!-- main end -->
<hr>
<div class="main">
    <div class="sub">
        <a href="#" class="show_comments" >Show comments #2</a>
        <div class="comments" >Comments #2</div>
    </div> <!-- sub end -->    
</div> <!-- main end -->
<hr>
<div class="main">
    <div class="sub">
        <a href="#" class="show_comments" >Show comments #3</a>
        <div class="comments" >Comments #3</div>
    </div> <!-- sub end -->    
</div> <!-- main end -->
<hr>
<div class="main">
    <div class="sub">
        <a href="#" class="show_comments" >Show comments #4</a>
        <div class="comments" >Comments #4</div>
    </div> <!-- sub end -->    
</div> <!-- main end -->
<hr>
<div class="main">
    <div class="sub">
        <a href="#" class="show_comments" >Show comments #5</a>
            <div class="comments" >Comments #5</div>
    </div> <!-- sub end -->    
</div> <!-- main end -->
<hr>

JavaScript

$(document).ready(function(){
    $(".comments").hide();
    $(".show_comments").click(function(e){
        e.preventDefault();
        $(this).next(".comments").show();
        //$(this).next(".comments").toggle();
    });
});