JSFiddle - React, Tailwind, and code Playground

by Chris Nicholson

HTML

<ul id="prod-container">
    <li class="product-group">
        <ul>
            <li class="product">
                hello world
            </li>
            <li class="product">
                hello world
            </li>
                         
        </ul>
    </li> 
    <li class="product-group hide">
        <ul>
            <li class="product">
                hello world
            </li>
            <li class="product">
                hello world
            </li>
            
        </ul>
    </li>  
    <li class="product-group hide">
        <ul>
            <li class="product">
                hello world
            </li>
            <li class="product">
                hello world
            </li>
            
        </ul>
    </li>      
</ul>
<a id="temp" href="#">More</a>

CSS

.product {
    margin: 10px;
    height: 100px;
    width: 100px;
    background: red;
}

.hide {
    display: none;
}

JavaScript

$('#temp').click(function() {    
    $('#prod-container li.hide:first').show(function(){ $(this).removeClass('hide') });
});