I do not know if it might be the best option, but since you want the class to go away and not be hidden, try saving them to a variable and just working with both.
You have other better ways to do this.
var lalaHtml = $('.lala').html();
var videoHtml = $('.video').html();
$(function() {
$(document).on('click', '.lala', function () {
$('.lala').html('');
$('.video').html(videoHtml);
console.log('lala')
});
});
$(function() {
$(document).on('click', '.video', function () {
$('.video').html('');
$('.lala').html(lalaHtml);
console.log('video')
});
});
.media3{
width:57%;
display: inline-block;
vertical-align: top;
padding-left: 60px;
padding-top:50px;
}
.media3 h2{
font-size: 16px;
color: red;
font-weight: bold;
padding-bottom:20px;
}
.media3 p{
color: rgb(112, 111, 111);
font-size: 16px;
font-weight: bold;
padding-bottom: 20px;
}
.media3 strong{
font-size:17px;
font-weight: bold;
}
.media4{
color:#FF0000;
font-size:12px;
}
.video.for {
display:block;
}
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script><sectionclass="lala">
<div class="media3">
<h2>title for the things we shuld do</h2>
<p>
"Pusing Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here'
<strong style=""> "we serve to wudwhq"."</strong>
</p>
<h3 class="media4" >-GRAG THE PRESIDENT OF THE USA</h3>
</div>
</section>
<div class="video">
<img src="https://as2.ftcdn.net/jpg/00/00/57/35/500_F_573556_fGmwktYr1XKdRjt3iNgydn5kuiNfpc.jpg">
</div>
Dai is only to hide the first div that you do not want to appear first