Magento 2 read more and read less in description product page

Question

I want to add a read more and read less button in the description on the product page.

I do not want to cut the entire text and onclick of the read more show another div with the entire content.

I want to check the height of the content and add a read more button when the description content is higher than 100px. This should be done by given the specific <div class="value"> always a height of 100px. When clicking on the read more button, it should change the css to heigh 100%.

How can I achieve this?

I want to add this into:

app/design/frontend/custom/custom/Magento_Catalog/templates/product/view/attribute.phtml

Answer 1

Try This Below Code..

    <?php
    /**
     * Copyright © 2016 Magento. All rights reserved.
     * See COPYING.txt for license details.
     */

    // @codingStandardsIgnoreFile

    /**
     * Product view template
     *
     * @see \Magento\Catalog\Block\Product\View\Description
     */
?>
 <?php
    $_helper = $this->helper('Magento\Catalog\Helper\Output');
    $_product = $block->getProduct();
    $_call = $block->getAtCall();
    $_code = $block->getAtCode();
    $_className = $block->getCssClass();
    $_attributeLabel = $block->getAtLabel();
    $_attributeType = $block->getAtType();
    $_attributeAddAttribute = $block->getAddAttribute();

    if ($_attributeLabel && $_attributeLabel == 'default') {
        $_attributeLabel = $_product->getResource()->getAttribute($_code)->getFrontendLabel();
    }

    if ($_attributeType && $_attributeType == 'text') {
        $_attributeValue = ($_helper->productAttribute($_product, $_product->$_call(), $_code)) ? $_product->getAttributeText($_code) : '';
    } else {
        $_attributeValue = $_helper->productAttribute($_product, $_product->$_call(), $_code);
    }
 ?>



 <?php if ($_attributeValue): ?>
    <?php if($_code === 'short_description') { ?>
        <div class="value more" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?> >
        <?php  if ($_product->getData('short_description')) {
            $string = strip_tags($_product->getData('description'));

            if (strlen($string) > 50) {
                // truncate string
                $stringCut = substr($string, 0, 50);
                $string = substr($stringCut, 0, strrpos($stringCut, ' ')).'... <a href="javascript:void(0);" class="readmore">Read More</a>';
            }
            echo $string;
            ?>
        <?php
        }else {?>
            <?php /* @escapeNotVerified */ echo $_attributeValue; 
            }
        ?>
        </div>

        <div class="less" style="display:none">
            <?php echo $_attributeValue; ?>
            <a href="javascript:void(0);" class="readless">Read Less</a>
        </div>
        <script type="text/javascript">
            console.log('test');
            require(["jquery"],function($){
                $('.readmore').on("click",function(){
                    $('.less').show();
                    $('.more').hide();
                });
                $('.readless').on("click",function(){
                    $('.less').hide();
                    $('.more').show();
                });
            });
        </script>
    <?php } else { ?>
        <div class="product attribute <?php /* @escapeNotVerified */ echo $_className?>">
            <?php if ($_attributeLabel != 'none'): ?><strong class="type"><?php /* @escapeNotVerified */ echo $_attributeLabel?></strong><?php endif; ?>
            <div class="value" <?php /* @escapeNotVerified */ echo $_attributeAddAttribute;?>><?php /* @escapeNotVerified */ echo $_attributeValue; ?></div>
        </div>
    <?php } ?>
 <?php endif; ?>