JSFiddle - React, Tailwind, and code Playground
HTML
<img src="http://www.officeplayground.com/Assets/ProductImages/pi3400-3599/3508_DuckEraser_1_i.jpg" class="activator" />
<div id="mobileSelectors" class="collapsed">
<h1>Quack Quack!</h1>
</div>
CSS
.activator {
cursor: pointer;
}
.collapsed {
display: none;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
#mobileSelectors {
background: yellow;
height: 100px;
text-align:center;
line-height: 100px;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
JavaScript
$('img.activator').click(
function(){
if ($('#mobileSelectors').hasClass('collapsed')) {
$('#mobileSelectors').removeClass('collapsed', 200);
} else {
$('#mobileSelectors').addClass('collapsed', 200);
}
}
);