JSFiddle - React, Tailwind, and code Playground

by s4ty

HTML

<div id="overlay"></div>

<a class="bericht-link" href="#">Erfahrungsbericht 1</a>
<div class="bericht">
    Hier steht der 1. Bericht!
</div>

<a class="bericht-link" href="#">Erfahrungsbericht 2</a>
<div class="bericht">
    Hier steht der 2. Bericht!
</div>

<a class="bericht-link" href="#">Erfahrungsbericht 3</a>
<div class="bericht">
    Hier steht der 3. Bericht!
</div>

<a class="bericht-link" href="#">Erfahrungsbericht 4</a>
<div class="bericht">
    Hier steht der 4. Bericht!
</div>

<a class="bericht-link" href="#">Erfahrungsbericht 5</a>
<div class="bericht">
    Hier steht der 5. Bericht!
</div>

CSS

#overlay { position: absolute; background-color: #000; color: #fff; width: 500px; height: 500px;}
#overlay, .bericht { display: none; }

#close { margin-right: 20px; float: right; text-decoration: underline; }
#close:hover { text-decoration: none; cursor: pointer;}

JavaScript

$(function () {
    var close = $('<div id="close">Close</div>') //Wir erstellen uns einen Close-Button
        
        $(document).on('click', '#close', function () { // Da unser Button noch nicht existiert müssen wir unseren Selektor auf ein bereits bestehendes Dokument legen z.B. document...wenn close gedrückt dann :
            $(this).parent().fadeOut(500); // blende das overlay wieder aus
        })
        
    $('.bericht-link').click(function () { // Klick auf einen Erfahrungsbericht
        $('#overlay')
            .html($(this).next('.bericht').clone()) // Bericht in overlay packen
            .prepend(close) // close button noch davor packen :D
            .fadeIn(1000, function () { // overlay einblenden
                $(this).find('.bericht').fadeIn(500); // danach bericht einblenden
            })
    })
    
})