Вопрос задан
3 года 4 месяца назад
Просмотрен
28 раз
$(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>
Anton Shchyrov
33k 2 2 золотых знака 29 29 серебряных знаков 59 59 бронзовых знаков
задан 18 янв 2020 в 12:59
Marron Marron
39 5 5 бронзовых знаков
Например, так:
$(document).ready(function() {
$('#lessons .view-source').on('click', f_acc);
});
function f_acc() {
$('#lessons .hide').not($(this).next()).slideUp(500);
$(this).next().slideToggle(500);
}
.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;
}
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lessons">
<div class="view-source"><a href="#">Урок 1</a></div>
<div class="hide">
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
</div>
<div class="view-source"><a href="#">Урок 2</a></div>
<div class="hide">
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
</div>
</div>
Или так:
$(document).ready(function() {
$('#lessons .hide').hide();
$('#lessons .view-source').on('click', function() {
$('#lessons .hide').not($(this).next()).slideUp(300);
$(this).next().slideToggle(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="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="lessons">
<div class="view-source"><a href="#">Урок 1</a></div>
<div class="hide">
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
</div>
<div class="view-source"><a href="#">Урок 2</a></div>
<div class="hide">
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
<div class="lesson__item">Спрятанный текст</div>
</div>
</div>
ответ дан 18 янв 2020 в 13:13
Sevastopol' Sevastopol'
28k 12 12 золотых знаков 70 70 серебряных знаков 138 138 бронзовых знаков