jQuery MoreContent

        

        <!-- jQuery -->
        <script src="libs/jquery/dist/jquery.min.js"></script>

        <!-- jquery.morecontent.js -->
        <script src="dist/jquery.morecontent.js"></script>

        
      

        

        $('[data-mrc]').moreContent();

        
      

        

        tpl: {
          content: '<div class="mrc-content"></div>',
          contentWrap: '<div class="mrc-content-wrap"></div>',
          btn: '<button class="mrc-btn" type="button"></button>',
          btnWrap: '<div class="mrc-btn-wrap"></div>',
          controls: '<div class="mrc-controls"></div>',
          shadow: '<div class="mrc-shadow"></div>'
        }

        
      

        

        $('.example').moreContent({
          height: 100,
          textClose: 'Раскрыть'
        });

        
      

        

        var options = { /* Параметры... */ },
          newOpts = { /* Новые параметры... */ };

        $('.example').moreContent('init', options); // Инициализация с польз. пар-ми
        $('.example').moreContent(options); // Инициализация с польз. пар-ми
        $('.example').moreContent(); // Инициализация с пар-ми поум.
        $('.example').moreContent('destroy'); // Деинициализация
        $('.example').moreContent('reinit', newOpts); // Реинициализация с новыми пар-ми
        $('.example').moreContent('reinit'); // Реинициализация с текущими пар-ми
        $('.example').moreContent('open'); // Переключить в состояние "Раскрыто"
        $('.example').moreContent('close'); // Переключить в состояние "Скрыто"
        $('.example').moreContent('toggle'); // Переключить состояние "Скрыто"/"Раскрыто"
        $('.example').moreContent('drop'); // Раскрыть содержимое на +100px (поум.)
        $('.example').moreContent('drop', 150); // Раскрыть содержимое на +150px
        $('.example').moreContent('drop', 25, '%'); // Раскрыть содержимое на +25% от макс. высоты

        
      

        
          var example = $('.example');

          example.on('beforeClose.mrc', function(e, instance, sets, content, height) {
            console.log( 'beforeClose: ', e, instance, sets, content, height );
            /* Аргументы:
              e - объект события
              instance - экз. класса MoreContent для элемента, на котором вызвано событие
              sets - объект с настройками
              content - JQ DOM эл. с контентом, высота которого будет изменена
              height - значение, на которое будет изменена высота контента, px
            */
          });

          example.moreContent(); // Инициализация
        
      

        
          /* Изменение параметров по умолчанию (свойство): */
          $.fn.moreContent.defaults.height = 350;

          /* Изменение параметров по умолчанию (объект): */
          $.fn.moreContent.defaults = $.extend(true, {},$.fn.moreContent.defaults, {
            height: 350,
            open: true
          });

          /* Далее инициализация... */
          $('.example').moreContent();
        
      

        
          $('.example').moreContent({
            "shadow": true, // Добавляет в разметку блок с тенью
            // Если нужно изменить разметку блока с тенью:
            // tpl: {
            //   shadow: '<div class="mrc-shadow"></div>'
            // }
          });
        
      

        
          .mrc-shadow {
            pointer-events: none;
            position: absolute;
            height: 100px; /* Высота блока с тенью */
            left: 0; right: 0; bottom: 0;
            z-index: 999;
            /* Цвета градиента в зависимости от фона сайта */
            background: linear-gradient(to top, #fff 14%, rgba(0, 0, 0, 0) 100%);
          }
        
      

        
          var ex = $('.example');

          ex.moreContent(); // Инициализация

          // Анимация разворачивания (Метод "open")
          ex.on('beforeOpen.mrc', function(e, instance, sets, content, height) {

            // Отменяет выполнение стандартной анимации (обяз.)
            instance.manually = true;

            // Запуск кастомной анимации для блока с контентом
            content.animate({
              height: height // До необх. высоты
            }, 1000, 'easeOutBounce', function() {
              // Запускает набор необх. операций по завершению анимации
              instance.afterChange('open');
            });
            
          });

          // Анимация сворачивания (Метод "close")
          ex.on('beforeClose.mrc', function(e, instance, sets, content, height) {
            
            instance.manually = true;

            content.animate({
              height: height
            }, 500, 'swing', function() {
              instance.afterChange('close');
            });
            
          });

          // Анимация частичного разворачивания (Метод "drop")
          ex.on('beforeDrop.mrc', function(e, instance, sets, content, height) {

            instance.manually = true;

            content.animate({
              height: height
            }, 1000, 'easeOutBounce', function() {
              instance.afterChange('drop');
            });
            
          });