Показать/скрыть часть блока (максимальная высота)
Добрый день. Не могу разобраться как сделать так, чтобы открывался блок не по заданной максимальной высоте скрипта, а по высоте блока в котором этот скрипт сидит. Гребо говоря.. задана высота 200px (выше есть кусок текста 200px, а потом обрезается, и чтобы увидеть его, нужно нажать на кнопку.. и блок разширяется), но максимальная высота всегда одинаковая.. Как убрать это? Проблема видна в мобильной версии, т.к. блок не весь открывается (ограничение в высоте), то част текста не видна при открытии.
(function($) { $.fn.moreContent = function(params) { this.each(function(index, el) { var options = $.extend({}, $.fn.moreContent.options, $(el).data()); options = $.extend({}, options, params); options.instance = $(el); options = $.fn.moreContent.init(options); }); return this; }; $.fn.moreContent.init = function(options) { options.button = $('<button class="'+ options.btnClass +'"/>').text(options.btn); options.wrapper = $('<div class="mc-wrapper"/>'); options.instance.autoHeight = options.instance.css('height', 'auto').height(); // make it wrap options.instance.wrap(options.wrapper); // insert button after element options.button.insertAfter(options.instance); // set default height for element options.instance.css({ height: options.height, overflow: 'hidden' }); // on click perform $.fn.moreContent.click options.button.click(function(e) { $.fn.moreContent.click(options) }); return options; }; $.fn.moreContent.click = function(options) { if (!options.instance.hasClass('active')) { options.instance.velocity( { height: options.instance.autoHeight }, { duration: options.duration, complete: function() { options.instance.addClass('active'); options.button.addClass('active').text(options.btnActive); } }, 'ease-in-out'); } else { options.instance.velocity( { height: options.height }, { duration: options.duration, complete: function() { options.instance.removeClass('active'); options.button.removeClass('active').text(options.btn); } }, 'ease-in-out'); } }; })(jQuery); $(document).ready(function() { $('.moreContent').moreContent({ height: 205, duration: 1000, btn: 'подробное описание ...', btnActive: '(свернуть)', btnClass: 'btn-default' }); }); |
<article class="articles__item" data-color="blue"> <div class="articles__item__content container moreContent"> <div class="articles__item__text"> <div class="title"> <div class="icon" style="background-image: url(images/portfolio/articles__fiscoclicicon.jpg)"></div><span class="text">FiscoClic</span> </div> <div class="download"><a class="fab fa-apple" href="https://itunes.apple.com/us/app/fiscoclic/id1340368830?mt=8&ign-mpt=uo=4" target="_blank"></a><a class="fab fa-android" href="https://play.google.com/store/apps/details?id=com.fiscoclic" target="_blank"></a> </div><span class="description">FiscoClic en la nube funciona en cualquier dispositivo las 24 horas del día con una disponibilidad garantizada del 99.99% lograda por más de 5 años consecutivos. La nueva experiencia del FiscoClic CFDI 3.3 permite que la captura de una factura promedio puede realizarse en menos de 5 segundos con el nuevo diseño de componentes inteligentes.</span> </div> <div class="articles__item__img"><img class="apple__body" src="images/portfolio/articles__fiscoclicApple.png"><img class="android__body" src="images/portfolio/articles__fiscoclicAndroid.png"> </div> </div> </article> типа так |
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Владислав_Со,
заменить options.instance.autoHeight = options.instance.css('height', 'auto').height(); на options.instance.autoHeight = options.instance[0].scrollHeight; |
Понял, не знал. Первый раз на таких форумах Спасибо за замечание!
И огромное спасибо за помощь с кодом !! |
Часовой пояс GMT +3, время: 13:55. |