JSFiddle - React, Tailwind, and code Playground

by neuroflux

HTML

<div id="elementTop" class="clicker" name="elementBottom">
    <img id="thumb" src="images/davey1.png" />
    <a>davey blair</a>
</div>

<div id="elementBottom">
    <p><span style="font-weight: bold;">age: </span>29</p>
    <p><span style="font-weight: bold;">hometown: </span>Charleston,SC</p>
    <p><span style="font-weight: bold;">regular or goofy: </span>Regular</p>                                                   
    <p><span style="font-weight: bold;">years shredding: </span>lifetime</p>
    <p><span style="font-weight: bold;">other sponsors: </span>naish, chucktown</p>
    <p><span style="font-weight: bold;">favorite trick: </span>THE OLLIE!</p>
    <p><span style="font-weight: bold;">favorite place to shred: </span>with my homies</p>
    <p><span style="font-weight: bold;">music preference: </span>all music</p>
    <p><span style="font-weight: bold;">paper or plastic: </span>hands</p>
    <p><span style="font-weight: bold;">cat or dog: </span>dogs</p>
    <p><span style="font-weight: bold;">other hobbies: </span>living life. work to live never live to work, live life.</p>
</div>

CSS

#elementBottom { overflow: hidden; }

JavaScript

function toggle_visibility(id) {
    $(id).stop().animate({height:'toggle'}, 500);
}

$('.clicker').on('click', function() {
   toggle_visibility('#' + $(this).attr('name'));
});