по клику показать продолжение текста

Тема в разделе "Дизайн, оформление и шаблоны", создана пользователем Olips, 3 ноя 2015.

  1. Olips

    Olips Новичок

    Сообщения:
    19
    Симпатии:
    0
    Добавил на страницу товара еще одно описание http://fmp.com.ua/po...ket-po-15g.html, из табов хочу убрать описание. Как сделать, чтоб кнопка "Еще..." раскрывала полное описание. Пример, как на http://rozetka.com.ua/89006/p89006/.

    это пишу в продакт.тпл
    Код:
    <div class="short-description"><?php echo $description; ?></div>
    <a class="description-more-link" onclick="$('.short-description').show(); return false;">Еще...</a>
    

    это в стайл.цсс:
    Код:
    .short-description::before{
      background: rgba(0, 0, 0, 0) -moz-linear-gradient(center top , rgba(255, 255, 255, 0) 0%, #fff 100%) repeat scroll 0 0;
      bottom: 0;
      content: "";
      display: block;
      height: 4em;
      left: 0;
      position: absolute;
      right: 0;
    }
    .short-description{
      margin:10px 15px;
      max-height: 20em;
      overflow: hidden;
      position: relative;
    }
    .description-more-link::before {
      height: 20px;
      right: 0;
      top: 0.22222em;
      width: 14px;
    }
    .description-more-link::after {
      content: "";
      position: absolute;  
    }
    .description-more-link {
      font-size: 16px;
      margin: 10px 15px;
    
    но почему-то "Еще..." ничего не открывает? (((
     
    Последнее редактирование модератором: 6 ноя 2015
  2. my2you

    my2you Продвинутый пользователь

    Сообщения:
    278
    Симпатии:
    121
    Для начала используйте теги code

    в вашем случаи, по быстрому как то так
    Код:
    $('.short-description').css('max-height', '100%').addClass('open');
    ну и css
    Код:
    .short-description.open::before {display: none;}
     
  3. Olips

    Olips Новичок

    Сообщения:
    19
    Симпатии:
    0
    т.е. нужно использовать этот код и плюс теги в каждое описание?
     
  4. my2you

    my2you Продвинутый пользователь

    Сообщения:
    278
    Симпатии:
    121
    теги это для того чтобы вы первое сообщение исправили как положено. Не прочитали статью что ли??
    Ну а остальное это применить к вашему коду. Т.е на кнопку добавить js и в css добавить код