Нажмите, чтобы показать больше

Question

У меня есть контент, который я хочу показать всего несколько строк вместе с кнопкой «читать дальше», а затем, когда пользователь нажимает кнопку «Читать дальше», остальная часть контента будет , раскрывающийся при снижении содержимого div (расширение его высоты), а затем кнопка read more будет заменена на «close».

Кто-нибудь знает о каких-либо jsfiddle демонстрациях или учебниках с примерами подобных вещей?

Благодарим за помощь!

Paul

Answer 1

Существует простой JQuery плагин в соответствии с вашими требованиями.

Он автоматически сокращает текст внутри элемента и добавляет ссылку «больше». Также отобразите ссылку «меньше» после того, как будет показан полный текст.

Использование:

Сокращает текст в 'элемент' и добавить 'больше' ссылку.

$(element).shorten(); 

Добавить ссылку с текстом 'read more', сокращая содержание элемента.

$(element).shorten({ 
    moreText: 'read more' 
}); 

Изменить ссылку текст «читать далее» и «меньше читать» переопределение значения по умолчанию «больше» и «меньше».

$(element).shorten({ 
    moreText: 'read more', 
    lessText: 'read less' 
}); 

Включить отображение по умолчанию 100 символов и скрыть текст выше 50 символов.

$(element).shorten({ 
    showChars: '50', 
}); 

Для получения более подробной информации обратитесь к this link.

Также вы можете обратиться к демо-версии одного и того же here

Answer 2

У вас есть два варианта .... либо загрузить дополнительное содержимое в DIV, который имеет ..

display: none; 

на нагрузке затем использовать JQuery

.show() 

в покажите содержимое, когда нажимается кнопка.

Если у вас есть огромное количество данных или изображений, которые вы могли бы использовать, и jQuery с вызовом AJAX для загрузки данных в div. При этом я бы использовал пустой div, готовый загрузить содержимое.

Answer 3

Возможно, вы хотите что-то вроде this.

Он использует slideToggle() метод от jQuery. Если вы не хотите это слайд, то просто используйте toggle(). Обратите внимание, что элемент long-text имеет настройку стиля display: none.

Ссылка: https://api.jquery.com/slideToggle/

Answer 4

Базовая структура вашего контента, так что вы можете включить эту функцию.

<div class="more-less"> 
    <div class="more-block"> 
     <p>The Content</p> 
    </div> 
</div> 

Все, что вы помещаете в div с более большим блоком, будет расширяемым. «Больше-меньше» div необходим для хранения ссылки More/Less и [...], которая добавляется с помощью jQuery, что экономит время добавления этих небольших частей.

$(function() { 

    // The height of the content block when it's not expanded 
    var adjustheight = 80; 
    // The "more" link text 
    var moreText = "+ More"; 
    // The "less" link text 
    var lessText = "- Less"; 

    // Sets the .more-block div to the specified height and hides any content that overflows 
    $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden'); 

    // The section added to the bottom of the "more-less" div 
    $(".more-less").append('<p class="continued">[&hellip;]</p><a href="#" class="adjust"></a>'); 

    $("a.adjust").text(moreText); 

    $(".adjust").toggle(function() { 
     $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible'); 
     // Hide the [...] when expanded 
     $(this).parents("div:first").find("p.continued").css('display', 'none'); 
     $(this).text(lessText); 
    }, function() { 
     $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden'); 
     $(this).parents("div:first").find("p.continued").css('display', 'block'); 
     $(this).text(moreText); 
    }); 
}); 

Вот демо .. http://jsfiddle.net/9FLx5/

Answer 5

Вот demo с помощью slideToggle

HTML:

Bla bla bla 
<div id="content" style='display:none'>more bla bla bla bla</div> 
<div id="click-me">more ...</div> 

Javascript/JQuery:

$(document).ready(function() { 
    $("#click-me").click(function() { 
     var moreOrless = $("#content").is(':visible') ? 'more ...' : 
          ' less'; 
     $(this).text(moreOrless); 
     $("#content").slideToggle(); 
    }); 
});