Как сделать кнопку/ссылку «смотреть полностью»?

Question

[prrrrrrr]

Подскажите, как сделать кнопку/ссылку «смотреть полностью»? к примеру в блоке текста на 30 строк, но как сделать чтобы показывалось например 3 строки, а потом была ссылка «смотреть полностью» и текст полностью разворачивался?

Answer 1

[Максим]

ну к примеру надо иметь два текста
1) маленький текст - который выводится на главной странице - и будет ссылкой
2) полный текст - который выводится только на странице с полной статьёй

такой механизм в Drupal
или же может пригодится вот это : https://codepen.io/topicstarter/pen/zJgZjg

Answer 2

[shmatuan]

Использовать jedfoster.com/Readmore.js
Или просто скрывать по высоте

Comments

[Александр Косицын]

Тоже бы ее и использовал. Чтобы велосипеды не придумывать.
А если хотите свой написать, то лучше посмотрите код readmore.js и помогите тому проекту.

[kentos]

я бы через toogle реализовал

Answer 3

[ewanff]

Попробуй так:

$(document).ready(function(){
        $text=$('.main-text');
        
        $('.main-text-more',$text).click(function(e){
            if($text.hasClass('hide')) {
                $text.removeClass('hide');
            } else {
                $text.addClass('hide');
            }
        }); 
 });

<div class="main-text hide">
  <p>Текст</p>
</div>
<div class="main-text-more">Подробнее</div>

.main-text {
    max-height: 3000px;
    position: relative;
    overflow: hidden;
    -webkit-transition: max-height 0.7s ease-out;
    -moz-transition: max-height 0.7s ease-out;
     -o-transition: max-height 0.7s ease-out;
    transition: max-height 0.7s ease-out; 
}
.main-text.hide {
    max-height: 400px;
}

Comments

[prrrrrrr]

не работает