JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="content">    
    <div class="entry">
        <div class="display">
            <img src="http://s4ty-testarea.s4.ohost.de/jQuery-board/images/001.jpg"/>
        </div>
        <div class="slide-area">
            <div class="area">
                <p>
                    Das VR-Konzept ermöglicht, die Kürze des V-Motors mit der geringen Breite des Reihenmotors zu verbinden. Der erste VR-Flugmotor von Lancia konnte durch die Verringerung des Zylinderwinkels um 10 Grad zehn Zentimeter schmaler gebaut werden. Nur so konnte er die Baumaßanforderungen erfüllen, die durch die Aerodynamik der Flugzeuge von Caproni begründet waren.
        Auch im Kraftfahrzeugbau ergeben sich durch die geringen Baumaße Vorteile. Der V4 des PKW-Modells Lancia Lambda hatte trotz bis zu 2,5 Litern Hubraum eine Gesamtlänge von nur 58 Zentimetern samt Schwungscheibe. Dadurch konnten Motor, Kupplung und Getriebe komplett im Motorraum untergebracht werden. Es war kein Getriebetunnel erforderlich, der den Platz im Innenraum beeinträchtigt hätte. Bei Frontantriebsmodellen mit Motor in Fahrtrichtung vor der Vorderachse, wie dem Lancia Fulvia, ermöglicht der VR-Motor ein neutraleres Fahrverhalten. Das Gewicht des Motors ist durch die kurze Bauweise weniger weit von der Mitte des Fahrzeugs entfernt.
        Bei PKW mit Frontantrieb wird der Verbrennungsmotor mittlerweile in der Regel quer eingebaut. Da neben dem Motor auch noch das Getriebe im Motorraum Platz finden muss und in Verlängerung des Motors angeflanscht wird, wird die Breite des Motors begrenzt, so dass in dieser Anordnung Vierzylindermotoren den Markt dominieren.
        Höhere Zylinderzahlen lassen sich realisieren, wenn der Motor nicht als Reihenmotor, sondern als V-Motor gebaut wird. Hier entsteht allerdings ein Zielkonflikt durch mehrere Forderungen:
        Ein Mindestabstand zwischen den Zylindern ist erforderlich, damit die Kanäle der Wasserkühlung und der Ölwege noch Platz finden.
        Die Zylinderwände müssen eine...

CSS

body{
    
    background: #fff;
    
}
.display{
    border: 6px solid #ccc;
    width: 500px;
    height: 375px;
    background: #fff;
    margin: 10px;
    
}
.display:hover{ cursor: pointer; }
.slide-area{
    height: auto;
    overflow: hidden;
    width: 512px;
    height: 375px;
    margin: 10px;
}
.area{
    border: 6px solid #ccc;
}

JavaScript

$(function() {
    
    var entry = $('div.entry'),
        height = entry.find('div.area').height(),
        border = parseInt(entry.find('div.display').css('border-bottom'), 10) + parseInt(entry.find('div.display').css('border-top'), 10);
        space = 20;
    
    entry       
        .find('.area')
        .css('height', height + space)
        .end()
        
        .find('.slide-area')
        .hide()
        .css('height', height + space + border)
        .end()   
        
        .find('div.area').css({marginTop: -entry.find('div.area').height()})
        .end()
        
        .find('div.display').toggle(
        
            function (){
                var parent = $(this).parent();
                parent.find('.slide-area').show();
                var area = parent.find('div.area');
                
                area
                    .stop(true, false)
                    .animate({marginTop: 0 }, 500)
                parent
                    .stop(true, false)
                    .animate({height: parent.find('div.area').height() + parent.find('div.display').height() + border}, 500)
            },
            function (){
                var parent = $(this).parent(),
                    area= parent.find('div.area'),
                    margin = area.height();
                area
                    .stop(true, false)
                    .animate({marginTop: '-='+ margin}, 500, function (){
                        area.parent().fadeOut(200);
                    })
                parent
                    .stop(true, false)
                    .animate({height: parent.find('div.display').height() + space + border}, 500)
            }
                    
        )
})