JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div class="content-list-item">
    <h2 class="content-list-item-head">Заголовок(клик)</h2>
    <div class="content-list-item-body">                 
        <h3 class="content-list-item-title">Заголовок(внутри)</h3>            <p class="content-list-item-disc">Описание</p>
      <iframe src="http://vk.com/video_ext.php?oid=-49912&id=163329178&hash=3a993b4b936e1bb3&hd=1" width="607" height="360" frameborder="0"></iframe>
    </div>
</div>

CSS

.content-list-item-head{
height:            30px;
width:            640px;
background:        #181;
line-height:    30px;
cursor:            pointer;
padding-left:    15px;
overflow:        hidden;
}

.content-list-item-head:hover{
background:        #1A1;
}

.content-list-item-body{
display:        none;
text-align:        center;
height:            460px;
width:            640px;
background:        #1C1;
position:        relative;
}



.content-list-item-body iframe{
position:        absolute;
bottom:            10px;
left:            15px;
}

JavaScript 1.7

$(document).ready(function(){ 
            $('.content-list-item-head').click(function(){ 
            $(this).parent().children('div.content-list-item-body').toggle('normal');
            return false;
            });
            });