Частичное скрытие блока (1 Viewer)

[shadow6630]

Есть длинный div блок с текстом и картинками, задача состоит в том что бы при помощи js (желательно на jquery) свернуть его до определенной высоты и при нажатии кнопки что бы он разворачивался. Помню давно в шаблоне от webrambo видел такую приблуду, но сейчас уже не могу найти

 

[span4bek]

button {outline: none;}
<div class="block">
  <button>Кнопка</button>
  <div class="text" tabindex="0">
    Я люблю овый год! В этот день случаются чудеса. Я желаю вам в новом году успехов, счастья, любви, много репутации на StackOverflow, новых проэктов и конечно же денег. С наступающим!
  </div>
</div>

.text {

  display: block;

  width: 300px;

  height: 10px;

  border: 1px solid black;

  padding: 5px;

  margin-top: 5px;

  outline: none;

  overflow: hidden;

}

.text:focus, button:focus ~ .text {height: auto;}

минута на поиск

 

[span4bek]

#block {
  border: 1px solid black;
  width: 200px;
  height: 100px;
  overflow: hidden;
  padding: 5px 10px;
  font-size: 14px;
}

#block:hover {
  height: auto;
  cursor: pointer;
}
<div id="block">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
</div>

или так

 

[shadow6630]

Не то, я уже нашел - Readmore.js. Но всеравно спасибо за помощь, хотя эти посты уже видел в поиске )

 

[solomongrundy]

Не то, я уже нашел - Readmore.js. Но всеравно спасибо за помощь, хотя эти посты уже видел в поиске )

Либо еще проще как раз из шаба рамбо (только нового)

js

$('.js-hide-text').each(function() {
        var a = $(this), b = parseFloat(a.css('line-height')), c = a.data('rows'), d = a.outerHeight(), h = b*c;
        console.log(b+' '+d+' '+h)
        if ( d > h ) {
            a.addClass('line-clamp').attr('style', '-webkit-line-clamp: '+c+'')
            .after('<div class="clamp-btn">Развернуть текст</div>');
        };
    });

html

<div class="js-hide-text" data-rows="6">Ваш текст</div>

css

.line-clamp {
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
}
.clamp-btn {
   font-weight: 700;
   cursor: pointer;
   margin-top: 10px;
   font-size: 12px;
   text-transform: uppercase;
}