JSFiddle - React, Tailwind, and code Playground

by Tahir Ahmed

HTML

<div>
    Stuff 1: <a href="#">show all</a>
    Impedit inimicus id eum, sit quis aeque dictas an. At cum vide labore ceteros, mel cu paulo legere labore. An pro quaeque fierent forensibus, eum eu complectitur necessitatibus, iusto liberavisse sed ei. Deserunt liberavisse ex vis. Duo ad omnium phaedrum. Ne vix vivendum concludaturque, eruditi mandamus eum at.
    <div class="extra hide">Lorem ipsum dolor sit amet, zril munere scripserit pro cu, vocent scripserit at sea. Nonumy liberavisse eos eu. Ridens expetendis definitionem ius at, cum et etiam meliore intellegebat. Luptatum appellantur eu nec, pri ad viderer lucilius. Stet aeterno oporteat has te, ne duo veritus accommodare. Quo an eius audire percipit. Nam decore consectetuer delicatissimi no.</div>
</div>
<br />
<div>
    Stuff 2: <a href="#">show all</a>
    Impedit inimicus id eum, sit quis aeque dictas an. At cum vide labore ceteros, mel cu paulo legere labore. An pro quaeque fierent forensibus, eum eu complectitur necessitatibus, iusto liberavisse sed ei. Deserunt liberavisse ex vis. Duo ad omnium phaedrum. Ne vix vivendum concludaturque, eruditi mandamus eum at.
    <div class="extra hide">Lorem ipsum dolor sit amet, zril munere scripserit pro cu, vocent scripserit at sea. Nonumy liberavisse eos eu. Ridens expetendis definitionem ius at, cum et etiam meliore intellegebat. Luptatum appellantur eu nec, pri ad viderer lucilius. Stet aeterno oporteat has te, ne duo veritus accommodare. Quo an eius audire percipit. Nam decore consectetuer delicatissimi no.</div>
</div>
<br />
<div>
    Stuff 3: <a href="#">show all</a>
    Impedit inimicus id eum, sit quis aeque dictas an. At cum vide labore ceteros, mel cu paulo legere labore. An pro quaeque fierent forensibus, eum eu complectitur necessitatibus, iusto liberavisse sed ei. Deserunt liberavisse ex vis. Duo ad omnium phaedrum. Ne vix vivendum concludaturque, eruditi mandamus eum at.
    <div class="extra hide">Lorem ipsum dolor sit amet, zril munere...

CSS

.hide {
    display: none;
}

JavaScript

var duration=400,hideElements=null,scrollTop=0,prevOffset=0,currOffset=0;
$('a').on('click',function(e){
    e.preventDefault();
    hideElements=$('.hide');
    if(hideElements.length>0){
        scrollTop=$(window).scrollTop();
        prevOffset=$(this).offset().top;
        hideElements.show();
        currOffset=$(this).offset().top;
        hideElements.hide();
        $('html, body').animate({scrollTop:scrollTop+(currOffset-prevOffset)},duration);
        hideElements.removeClass('hide').slideDown(duration);
    }
});