JSFiddle - React, Tailwind, and code Playground

by bizamajig

HTML

<div id="container">
    <a href="#" class="showBootomFirst">Click Me For each</a>
    <a href="#" class="showAll">Animate All</a> 
    
    <div id="feeds">
        
        <p class="pending">Content 2</p>
        <p class="pending">Content 3</p>
        <p>Old content</p>
    </div>
</div>

CSS

#feeds p {
    padding: 10px;   
}

.pending {
    display: none;
    
}

JavaScript

var messages = [
    "ed ut tortor odio. Donec ultricies pharetra turpis nec sodales.",
    "Mauris quam neque, laoreet non posuere quis, euismod vitae mi."
    ];

function showAll() {
    $("p.pending", "#feeds").last().animate({
        opacity: "show",
        height: 'toggle'
    }, 600, function() {
        showAll();
    }).removeClass("pending");

}

function showBootomFirst() {

    var animated = $("p.pending", "#feeds").last().animate({
        opacity: "show",
        height: "toggle"
    }, 500, function() {
        animated.removeClass("pending")
    });
}

$("a.showAll").bind("click", showAll);
$("a.showBootomFirst").bind("click", showBootomFirst);