Home>

I am making a page of a little news list.
I stumbled upon a question while implementing a function that cuts off the display when the text exceeds a certain number of lines and displays "Read more".
There are three main things I want to do.

  • If the text is 3 lines or more, "Read more" is displayed.
  • Hide "Read more" if there are 3 or less lines
  • Display the "Close" button after displaying the full text

https://dezanari.com/jquery-trim-line-height/
I was able to work individually even if there are multiple "Read more" and "Close" by referring to this page, but the part that gets the height of each individual text does not work.
Since the source currently gets the very first height, if the first item has 3 or more lines, "Read more" will be displayed even if the subsequent items are short, and conversely the text If is short, it will not work after that, or if there is a second or later one longer than the first one, it will be displayed as if it covers the close button.

How can I earn and operate the "var textHeight = $text.height ();" part of the source individually?

<script>$(document) .ready (function () {
    // read more
    var $text = $('.more_txt');// Body
    var $txt_open = $('.txt_open');// Read more
    var $txt_close = $('.txt_close');// Close
    var lineNum = 3;
    var textHeight = $text.height ();// Get the height of the entire text
    var lineHeight = parseFloat ($text.css ('line-height'));// Get line-height
    var textNewHeight = lineHeight * lineNum;// Get height up to the specified number of lines
    if (textHeight>textNewHeight) {// Operates more than the specified number of lines
        $text.css ({{
            height: textNewHeight,
            overflow:'hidden',});
        $txt_open.click (function () {// Read more
            $(this) .next ($txt_close) .css ('display','block');// Show close
            $(this) .css ('display','none');
            $(this) .prev (". more_txt"). css ({
                'height': textHeight,
                'overflow':'visible',
            });
        });
        $txt_close.click (function () {// close
            $(this) .prev ($txt_open) .css ('display','block');// Read more
            $(this) .css ('display','none');
            $(this) .prev (). prev (". more_txt"). css ({
                height: textNewHeight,
                overflow:'hidden',
            });
        });
    } else {
        $txt_open.hide ();// Hide 3 lines or less
    }
});</script>
                      Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.         Read more<ion-icon name = "chevron-down-outline"></ion-icon>        Close<ion-icon name = "chevron-up-outline"></ion-icon>                           Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>          Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.<br>Contains the text.
                 Read more<ion-icon name = "chevron-down-outline"></ion-icon>        Close<ion-icon name = "chevron-up-outline"></ion-icon>                           Contains the text.<br>Contains the text.
                 Read more<ion-icon name = "chevron-down-outline"></ion-icon>        Close<ion-icon name = "chevron-up-outline"></ion-icon> 
  • Answer # 1

    As CSS

    .d_none {
      display: none;
    }

    Was supplemented.

    Also on the first "close" anchord_noneI didn't have enough classes, so I added it.

    Close<ion-icon name = "chevron-up-outline"></ion-icon>

    So, the main subject,

    How can I earn and operate the "var textHeight = $text.height ();" part of the source individually?

    It's here.

    var $text = $('.more_txt');// Body

    ↑ Here,$textThere are three.more_txtIs selected, so you can repeat the "subsequent processing (getting the height, loading the handler for the click event, etc.)" for each of them.

    To do thateach ()Is used.

    $text.each (function () {
      // * 1
    });

    3.more_txt"* 1" is repeatedly executed for each of.

    Therefore, write "subsequent processing" in the "* 1" part. Of the current codevar $txt_open = $('.txt_open');After that, you can use it almost as it is. However, the following points need to be revised.

    (1)$textInstead of,$(This)use.

    var textHeight = $(this) .height ();// Get the height of the entire text


    ↑ It looks like this.each ()Inside$(This)But "three.more_txtOf these, the one I'm paying attention to right now. "

    (2)$txt_openIs$(This)Search from the starting point.

    var $txt_open = $(this) .nextAll ('.txt_open');// Read more


    ↑ Here, too$txt_open = $('.txt_open')If you do, you will be in trouble because three "Read more" will be selected.

    (3)$txt_closeAlso,$(This)Search from the starting point.

    var $txt_close = $(this) .nextAll ('.txt_close');// Close

    With the above, I think that it will work for the time being,
    After that, please refactor it to your liking.