How to set height for the Item Description in PDP page while some items have more and some have less description without causing issue while clicking on More and Less Buttons.

Scenario: In some Cases, Some Items have less description some have more description while clicking on more or less button it working fine for which have more description and for which have less description it will work reversly so using this solution we can solve this issue.

Template:

<div class="product-details-full-feature-more">More v</div>

<div class="product-details-full-feature-less product-details-hide-me">Less ^</div>

SCSS:

.product-details-full-feature-content-full.product-details-feature-expand {
  height: auto !important;
}

JavaScript:

$('.product-details-full-feature-more').click(function() {

            // if ($('.product-line-specific-value').height() > 190) {

            $('.product-details-full-feature-content-full').addClass('product-details-feature-expand');

            $('.product-details-full-feature-more').addClass('product-details-hide-me');

            $('.product-details-full-feature-less').removeClass('product-details-hide-me');

            // }

        });

        $('.product-details-full-feature-less').click(function() {

            $('.product-details-full-feature-content-full').removeClass('product-details-feature-expand');

            $('.product-details-full-feature-more').removeClass('product-details-hide-me');

            $('.product-details-full-feature-less').addClass('product-details-hide-me');

        });

        $('.product-details-full-accessories-more').click(function() {

            $('.product-details-full-panel-body-recommended').addClass('product-details-accessories-expand');

            $('.product-details-full-accessories-more').addClass('product-details-hide-me');

            $('.product-details-full-accessories-less').removeClass('product-details-hide-me');

        });

        $('.product-details-full-accessories-less').click(function() {

            $('.product-details-full-panel-body-recommended').removeClass('product-details-accessories-expand');

            $('.product-details-full-accessories-more').removeClass('product-details-hide-me');

            $('.product-details-full-accessories-less').addClass('product-details-hide-me');

        });
_.defer(function() {

            if ($('.product-line-specific-value').height() < 190) {

                $('.product-details-full-feature-content-full').css('height', 'auto');

            } else {

                $('.product-details-full-feature-content-full').css('height', '190px');

            }

        });

Leave a comment

Your email address will not be published. Required fields are marked *