JSFiddle - React, Tailwind, and code Playground

by Lijo

HTML

<html>

<div class="repeaterTableBorder">
    <div class="repeaterRecord">
        <div class="repeaterIdentifier">
            <div class="reportTitle">
                Grocery Report:
            </div>
        </div>
        <div class="viewLogTitle">
            <div class="viewLogText">
                View Report Log
            </div>
            <div>
                
               
                
                <input id="Button2" type="button" value="Collapse" class="collapseLogIcon" />
                
                
            </div>
        </div>
        <div class="reportLog">
            TEST
        </div>
    </div>
    <div class="repeaterRecord">
        <div class="repeaterIdentifier">
            <div class="reportTitle">
                HR Report:
            </div>
        </div>
        <div class="viewLogTitle">
            <div class="viewLogText">
                View Report Log
            </div>
            <div>
                
                             
               
                <input id="Button4" type="button" value="Collapse" class="collapseLogIcon" />
                
            </div>
        </div>
        <div class="reportLog">
            TEST
        </div>
    </div>
</div>
 
     <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.js"></script>
    
    
</html>

CSS

.repeaterRecord
{
 padding: 20px 0 20px 0;   
}

.reportLog
{
 background-color: orange;   
}

JavaScript

$(document).ready(function () {
 
 
    var collpaseButton = $('.collapseLogIcon')
    
 
    
    collpaseButton.click(function () 
     {
 
        $(this).closest('.viewLogTitle').next().hide();
        
               
 
    });
 
   
  
 
 
}
);