JSFiddle - React, Tailwind, and code Playground

by avrelian

HTML

<div class="row"><a href="javascript:void(0)">Lorem ipsum dolor sit amet</a><span></span></div>
<div class="row"><a href="javascript:void(0)">consectetur adipisicing elit</a><span></span></div>
<div class="row"><a href="javascript:void(0)">sed do eiusmod tempor</a><span></span></div>
<div class="row"><a href="javascript:void(0)">incididunt ut labore et dolore magna aliqua</a><span></span></div>
<div class="row"><a href="javascript:void(0)">Ut enim ad minim veniam</a><span></span></div>
<div class="row"><a href="javascript:void(0)">quis nostrud exercitation ullamco</a><span></span></div>
<div class="row"><a href="javascript:void(0)">laboris nisi ut aliquip ex ea commodo consequat</a><span></span></div>
<div class="row"><a href="javascript:void(0)">Duis aute irure dolor in reprehenderit</a><span></span></div>
<div class="row"><a href="javascript:void(0)">in voluptate velit esse cillum</a><span></span></div>
<div class="row"><a href="javascript:void(0)">dolore eu fugiat nulla pariatur</a><span></span></div>
<div class="row"><a href="javascript:void(0)">Excepteur sint occaecat cupidatat non proident</a><span></span></div>
<div class="row"><a href="javascript:void(0)">sunt in culpa qui officia deserunt</a><span></span></div>
<div class="row"><a href="javascript:void(0)">mollit anim id est laborum</a><span></span></div>

CSS

.row {
    margin: 3px;
}

.video {
    margin: 3px 0;
    height: 315px;
    width: 420px;
}

JavaScript

var video = $('<div class="video"><iframe width="420" height="315" src="http://www.youtube.com/embed/4rA4ZRErflE" frameborder="0" allowfullscreen></iframe></div>');

$('a').click(function() {
    var a = $(this);
    var row = a.parents('.row');
    var span = a.siblings('span');
    
    var hasVideo = a.siblings('.video').length;
    
    if(hasVideo) {
        a.siblings('.video').remove();
        a.text(span.hide().text()).show();
    } else {
        span.text(a.hide().text()).show();
        row.append(video);
    }
});