JSFiddle - React, Tailwind, and code Playground

HTML

<div class="spo">
    <p id="ff">YouTube</p>
    <div class="wr_spo"><iframe allowfullscreen="" frameborder="0" height="188" src="//www.youtube.com/embed/CCKZyHfo31o?rel=0" width="250"></iframe>
<iframe allowfullscreen="" frameborder="0" height="188" src="//www.youtube.com/embed/UErVe2GwyCM?rel=0" width="250"></iframe>
        
<iframe allowfullscreen="" frameborder="0" height="188" src="//www.youtube.com/embed/2casBKlJs0U?rel=0" width="250"></iframe></div>
</div>

CSS

.wr_spo {
    display:none;
}
.over .wr_spo {
    display:block;
}
.spo {
    margin:5px;
    border:1px solid #444;
    background:#eee;
    padding:5px;
    border-radius:4px;
}
.wr_spo {
    border-top:1px solid #444;
}
p {
    margin:0px;
    cursor:pointer;
}

JavaScript

$(function () {
       $('.spo').click(function (e) {
                 e.preventDefault();
       $(this).toggleClass('over');
        });
   });