JSFiddle - React, Tailwind, and code Playground

by lustre

HTML

<div class="moreclients">
    <img src="http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/clients-logos.png" />
    <img src="http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/clients-logos.png" />
    <img src="http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/clients-logos.png" />
    <img src="http://dev.miltonbayer.com/sites/all/themes/miltonbayer/images/clients-logos.png" />
</div>
<div class="viewall viewclients">
    <a href="#"><span>View all</span><span>Click here</span></a>
</div>

CSS

.moreclients {
    display:none;
    margin:0 auto;
    width:400px;
    z-index:10000;
}

.moreclients img {
    width:100%;
}

.showMenu {  
    display:block !important;
}





.viewall {
	margin-top:50px;
	text-align:center;
}

.viewall a {
	position: relative;
	display: inline-block;
    margin: 0 20px;
	padding: 18px 20px;
	outline: none;
	color: #3b414f;
	text-decoration: none;
	text-transform: uppercase;
}

.viewall a:hover,
.viewall a:focus {
	outline: none;
}

.viewall a::before,
.viewall a::after {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: #3b414f;
	content: '';
	opacity: 0.2;
	-webkit-transition: opacity 0.3s, height 0.3s;
	-moz-transition: opacity 0.3s, height 0.3s;
	transition: opacity 0.3s, height 0.3s;
}

.viewall a::after {
	top: 100%;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-10px);
	-moz-transform: translateY(-10px);
	transform: translateY(-10px);
}

.viewall a span:first-child {
	z-index: 2;
	display: block;
	font-size: 24px;
	font-family: 'nevis-bold', sans-serif;
}

.viewall a span:last-child {
	z-index: 1;
	display: block;
	padding: 8px 0 0 0;
	text-transform: none;
	font-style: italic;
	font-size: 16px;
	font-family: "kepler-std-display",serif;
	opacity: 0;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
	-webkit-transform: translateY(-100%);
	-moz-transform: translateY(-100%);
	transform: translateY(-100%);
}

.viewall a:hover::before,
.viewall a:focus::before {
	height: 6px;
}

.viewall a:hover::before,
.viewall a:hover::after,
.viewall a:focus::before,
.viewall a:focus::after {
	opacity: 1;
	-webkit-transform: translateY(0px);
	-moz-transform: translateY(0px);
	transform: translateY(0px);
}

.viewall a:hover span:last-child,
.viewall...

JavaScript

$(document).ready(function(){
    
    var clicked = 0;
    $('.viewclients').click(function(){
        
        if(clicked==0) {
            $('.moreclients').slideDown(1200, function(){
                $('.moreclients').addClass('showMenu');
                $('.viewall').html('<a href="#"><span>View Less</span><Span>Click here</span></a>');
            });
            clicked = 1;
            return;
        } else {
            $('.moreclients').slideUp(1200, function(){
                $('.moreclients').removeClass('showMenu');
                $('.viewall').html('<a href="#"><span>View All</span><Span>Click here</span></a>');
            });
            clicked = 0;     
            return;
        }
        return false;
    });
});