Примеры как на jQuery и показывать скрывать определенный текст по клику на ссылку или кнопку.
<a class="content_toggle" href="#">Показать текст</a>
<div class="content_block" style="display: none;">
<p>Блок скрытого текста...</p>
</div>
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.content_toggle').click(function(){
$('.content_block').slideToggle(300);
return false;
});
});
</script>Пример:
<a class="content_toggle" href="#">Показать текст</a>
<div class="content_block" style="display: none;">
<p>Блок скрытого текста...</p>
</div>
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.content_toggle').click(function(){
$('.content_block').slideToggle(300, function(){
if ($(this).is(':hidden')) {
$('.content_toggle').html('Показать текст');
} else {
$('.content_toggle').html('Скрыть текст');
}
});
return false;
});
});
</script>Пример:
Изменить вид кнопки при показе и скрытии текста можно сделать добавлением класса, например «open».
<a class="content_toggle" href="#">Показать текст</a>
<div class="content_block" style="display: none;">
<p>Блок скрытого текста...</p>
</div>
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.content_toggle').click(function(){
$('.content_block').slideToggle(300, function(){
if ($(this).is(':hidden')) {
$('.content_toggle').html('Показать текст');
$('.content_toggle').removeClass('open');
} else {
$('.content_toggle').html('Скрыть текст');
$('.content_toggle').addClass('open');
}
});
return false;
});
});
</script>Если нужно скрыть длинный текст, то можно сделать блок с фиксированной высотой и эффектом плавного затухания текста.
<div class="content_block hide">
<p>Блок длинного текста...</p>
</div>
<a class="content_toggle" href="#">Подробнее</a>
<script src="/js/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('.content_toggle').click(function(){
$('.content_block').toggleClass('hide');
if ($('.content_block').hasClass('hide')) {
$('.content_toggle').html('Подробнее');
} else {
$('.content_toggle').html('Скрыть');
}
return false;
});
});
</script>.content_block {
overflow: hidden;
position: relative;
}
.content_block.hide {
height: 300px;
}
.content_block.hide:after{
content: "";
display: block;
height: 100px;
position: absolute;
left: 0;
right: 0;
bottom: 0;
background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff 75%)
}
Ruslan skurjat
William Nash
Дмитрий Смолишкович
