Как сделать кнопку «подробнее»?

Question

[Den Savi]

Как сделать кнопку подробнее, чтобы при нажатии раскрывался текст? Я бы выбрал скрипт readmore.js , но надо ещё сделать , чтобы снизу текст становился прозрачным, как например на сайте розетки в самом низу.

Как такое реализовать? Можно сделать такое с помощью плагина readmore.js?

Answer 1

[Василь Бойко]

Нужно сделать так:
при клике на "читать полностью" добавить класс, например, active к родительскому блоку с классом, например, 'article'

$(document).ready(function(){
  $('.read-moore').click(function(){
    $('.article').parent().toggleClass('active');
  });
});

А чтобы текст становился прозрачным, нужно добавить вниз 'article' ещё один div, или добавить через всевдоэлемент градиент, с фиксированной высотой

Comments

[Василь Бойко]

ошибка, вместо .parent нужно .parent()

[Den Savi]

Спасибо :)

[Василь Бойко]

Den Savi: но если вы знаете основы CSS то дальше сможете сами сделать. Будет ещё так:
.article{max-height: 150px;}
.article.active{max-height: auto;}