$(document).ready(function() {
$('.view-source .hide').hide();
$('.view-source a').on('click', function() {
$('.view-source .hide').slideUp(300);
$(this).parent().find('.hide').slideDown(300);
});
});
.view-source {
background-color: #f7f7f7;
border: solid 1px #e2e2e2;
color: #75bde3;
padding-left: 30px;
padding-top: 20px;
padding-right: 260px;
padding-bottom: 20px;
margin-bottom: 10px;
}
a {
text-decoration: none;
}
.lesson__item {
text-align: center;
margin-top: 10px;
background-color: #fff;
color: #75bde3;
padding-top: 12px;
padding-bottom: 12px;
border: solid 1px #5683a2;
padding-left: 80px;
padding-right: 80px;
border-radius: 5px;
}
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<body>
<div class="view-source">
<a href="#">Урок 1</a>
<div class="hide lesson__item">Спрятанный текст</div>
<div class="hide lesson__item">Спрятанный текст</div>
<div class="hide lesson__item">Спрятанный текст</div>
<div class="hide lesson__item">Спрятанный текст</div>
</div>
<div class="view-source">
<a href="#">Урок 2</a>
<div class="hide lesson__item">Спрятанный текст</div>
<div class="hide lesson__item">Спрятанный текст</div>
<div class="hide lesson__item">Спрятанный текст</div>
</div>
</body>