JSFiddle - React, Tailwind, and code Playground

HTML

<img src="http://placehold.it/650x350">
<a href="#" id="toggle-reveal">Filter products</a>
    <div class="filter-wrap">
<div id="filters">
    <!-- start slipsum code -->

<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>

<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

<p>Now that we know who you are, I know who I am. I'm not a mistake! It all makes sense! In a comic, you know how you can tell who the arch-villain's going to be? He's the exact opposite of the hero. And most times they're friends, like you and me! I should've known way back when... You know why, David? Because of the kids. They called me Mr Glass. </p>


</div>
    </div>
    <h1>Content beneath link</h1>
<p>You think water moves fast? You should see ice. It moves like it has a mind. Like it knows it killed the world once and got a taste for murder. After the avalanche, it took us a week to climb out. Now, I don't know exactly when we turned on each other, but I know that seven of us survived the slide... and only five made it out. Now we took an oath, that I'm breaking now. We said we'd say it was the snow that killed the other two, but it wasn't. Nature is lethal but it doesn't hold a candle to man. </p>

<p>Now that we know who you are,...

CSS

a { width:100%; color: #fff; background: #222; display:block; text-align: center; }
a#toggle-reveal { background: cyan; position:relative; height:60px; }
.filter-wrap { overflow:hidden; }
#filters { 
    background: #333; 
    color: #fff; 
    width:100%; 
    overflow:hidden; 
    padding:20px;
    opacity: 0;
    -webkit-transition: all 0.2s ease-in-out;
	   -moz-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
}

#filters.hide { background: red; }
#filters.reveal { background: green; }

JavaScript

// Play animation then go somewhere / do something

var filterheight = $('#filters').height();
var hidefilters = $('#filters').css('margin-top',(-(filterheight+60))+"px");

$('#toggle-reveal').click(function (e) {
    e.preventDefault();
    
    if ($('#filters').hasClass( "reveal" )) {
        
        $(this).text(function(i, text){
		  return text === "<span class='ico sort'></span>Filter Products" ? "<span class='ico close-sort'></span>Close Filters" : "<span class='ico sort'></span>Filter Products";
		});
        
        $('#filters').css('margin-top',(-(filterheight+60))+"px");
        $('#filters').css('opacity',"0");
	    $('#filters').removeClass( "reveal" );
        $('#filters').addClass( "hide" );
        
	} else {
        $(this).text(function(i, text){
		  return text === "<span class='ico close-sort'></span>Close Filters" ? "<span class='ico sort'></span>Filter Products" : "<span class='ico close-sort'></span>Close Filters";
		});
        $('#filters').removeClass( "hide" );
		$('#filters').addClass( "reveal" );
        $('#filters').css('opacity',"1");
        $('#filters').css('margin-top',(0)+"px");
	}
         
});