JSFiddle - React, Tailwind, and code Playground

by Emre Erkan

HTML

<span class="hideelement" style="display:none;">First</span>
<span class="hideelement" style="display:none;">Second</span>
<span class="hideelement" style="display:none;">Third</span>
<span class="hideelement" style="display:none;">Fourth</span>
<span class="hideelement" style="display:none;">Fifth</span>
<span class="hideelement" style="display:none;">Sixth</span>
<span class="hideelement" style="display:none;">Seventh</span>
<span class="hideelement" style="display:none;">Eighth</span>
<span class="hideelement" style="display:none;">Ninth</span>
<span class="hideelement" style="display:none;">Tenth</span>
<a class="moretag"><strong>More</strong></a>
<a class="lesstag" style="display:none;"><strong>Less</strong></a>

JavaScript

$(document).ready(function() {

    $("a.moretag").click(function() {
        $("span.hideelement").fadeIn("slow", function(){ this.style.removeAttribute('filter'); });
        $("a.moretag").fadeOut("slow");
        $("a.lesstag").fadeIn("slow", function(){ this.style.removeAttribute('filter'); });
    });


    $("a.lesstag").click(function() {
        $("span.hideelement").fadeOut("slow");
        $("a.lesstag").fadeOut("slow");
        $("a.moretag").fadeIn("slow", function(){ this.style.removeAttribute('filter'); });
    });

});