Блог

Всем доброе утро!

У меня есть скрипт читать больше / читать меньше. Пользователь нажимает на вкладку «Подробнее», и появляется больше текста. Вот как это настраивается. существует DIV, который содержит все содержимое, внутри этого DIV находится другой DIV, который также содержит дополнительное содержимое. Оба DIVS не имеют фиксированной высоты. Я хотел бы установить начальную высоту для контейнера DIV, который является полем содержимого, Пример: начальная высота, скажем, 200 пикселей, а при нажатии кнопки «Подробнее» сделайте поле содержимого размером 400 пикселей.

Вот код (html):

 <div class="contentBox">
<p>Initial Text goes here</p>

<a class="addlTextTrigger" href="#">Read More</a>

<div class="addlTextBox">
<p>Additional Text here.</p>
</div>
</div>
  

И вот jQuery, пожалуйста, не jQuery переключает стили, но это просто используется для оформления вкладок / ссылок, используемых для запуска функции «Читать больше» / «читать меньше».

Вот jQuery:

 $(document).ready(function() {
$('.addlTextBox').hide();
$('.addlTextBoxTrigger').toggle(function(){
$('.addlTextBox').fadeIn('fast');
$(this).text("Read Less");
},
function(){
$('.addlTextBox').hide('fast');
$(this).text("Read More");
});
});

$(document).ready(function() {
$('.addlTextBoxTrigger').click(function(){
$(this).toggleClass('readMoreClick');
});
});
  

Живой пример

Использование css-классов и их включение / выключение

Javascript:

 $(document).ready(function() {
    $('.addlTextBox').hide();
    $(".contentBox").addClass("readLess");
    $('.addlTextTrigger').toggle(function() {
        $('.addlTextBox').fadeIn('fast');
        $(".contentBox").removeClass("readLess");
            .addClass("readMore");
        $(this).text("Read Less");
    }, function() {
        $('.addlTextBox').hide('fast');
        $(".contentBox").addClass("readLess");
            .removeClass("readMore");
        $(this).text("Read More");
    });
});
  

CSS:

 .readLess {
    height: 200px;
}

.readMore {
    height: 400px;
}