JSFiddle - React, Tailwind, and code Playground

HTML

<div class="videotoggle">
                  
<p><h2 class="entry-title">View a few minutes of the 101 session!</h2></p>

<div class="videoblock">

<iframe width="560" height="315" src="http://www.youtube.com/embed/1h9A-6V7dgQ" frameborder="0" allowfullscreen></iframe>

</div></div>

<div class="videotoggle">
                  
<p><h2 class="entry-title">View a few minutes of the 102 session!</h2></p>

<div class="videoblock">

<iframe width="560" height="315" src="http://www.youtube.com/embed/Fm2aGWCeulQ" frameborder="0" allowfullscreen></iframe>

</div></div>

<div class="videotoggle">
                  
<p><h2 class="entry-title">View a few minutes of the 103 session!</h2></p>

<div class="videoblock">

<iframe width="560" height="315" src="http://www.youtube.com/embed/YsEWe6jNJn8" frameborder="0" allowfullscreen></iframe>

</div></div>

<div class="videotoggle">
                  
<p><h2 class="entry-title">View a few minutes of the 104 session!</h2></p>

<div class="videoblock">

<iframe width="560" height="315" src="http://www.youtube.com/embed/0l6Rl9FNFF4" frameborder="0" allowfullscreen></iframe>

</div></div>

<div class="videotoggle">
                  
<p><h2 class="entry-title">View a few minutes of the 105 session!</h2></p>

<div class="videoblock">

<iframe width="560" height="315" src="http://www.youtube.com/embed/XOsDbNxuf2E" frameborder="0" allowfullscreen></iframe>

</div></div>


<div class="videotoggle">
                  
<p><h2 class="entry-title">View a few minutes of the 106 session!</h2></p>

<div class="videoblock">

<iframe width="560" height="315" src="http://www.youtube.com/embed/oDo-7Z4Y1iI" frameborder="0" allowfullscreen></iframe>

</div></div>

<div class="videotoggle">
                  
<p><h2 class="entry-title">View a few minutes of the 107 session!</h2></p>

<div class="videoblock">

<iframe width="560" height="315" src="http://www.youtube.com/embed/1h9A-6V7dgQ" frameborder="0" allowfullscreen></iframe>

</div></div>

CSS

.entry-title {
    cursor: pointer;
}

.active-title
{
    color: #3CF;
}

h2.entry-title {
color:#0084A0;
text-decoration:underline;
font-size:14px;
font-weight:bold; }

.videoblock{width:560px; height: 315px; overflow:hidden}

JavaScript

$('.videoblock').css('height','0');
$(".entry-title").click(function() {
    $this = $(this);
    $content = $this.closest('.videotoggle').find(".videoblock");
    if (!$this.is('.active-title')) {
        
        $('.active-title').removeClass('active-title');
        $this.addClass('active-title');
        $(".videoblock:visible").animate({height: "0"}, { duration: 400, queue: false });
        $content.animate({height: "315"}, { duration: 400, queue: false });
    }
});