如何使用JavaScript为文本隐藏创建”显示更多”和”显示更少”的功能

“显示更多”和”显示更少”功能对于包含大量文章的新闻和杂志网站等文字较多的网站非常有用。这可以帮助网页设计师根据需要给用户提供阅读更多或更少文本的自由。

方法： 通过点击按钮可以动态改变显示的内容。不是在网页上显示完整的段落，而是最初只显示一部分文本，并添加一个按钮来显示更多的文本。开发人员可以决定在点击按钮之前和之后应显示的文本数量。

例子： 可以使用简单的if-else条件来实现上述方法，该条件检查文本的当前状态并根据此状态显示或隐藏文本。下面的例子说明了这种方法：

<!DOCTYPE html>
<html>

<head>
    <title>
        How to create Show More and Show Less
        functionality for hiding text using JavaScript ?
    </title>
    <style>
        /* Initially, hide the extra text that
            can be revealed with the button */
        #moreText {

            /* Display nothing for the element */
            display: none;
        }
    </style>
</head>

<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>

    <h3>Show More and Show Less Example</h3>

    <p>
        GeeksforGeeks was born out of necessity-
        a need to provide a convenient and
        one-stop educational portal to all the
        students of Computer Science.
        <span id="points">...</span>

        <!-- Define the text that would be
                hidden by default and only shown
                when clicked on the button -->
        <span id="moreText"> This necessity was
            as personal to me as it was universal.
            This need combined with my passion for
            teaching resulted in GeeksforGeeks as
            we know today. My message to you, in
            our inaugural edition of Geeks Digest,
            would be that if you are looking for
            a problem to work on, you don’t need
            to look very far for it. All you should
            do is to look around yourself.
        </span>
    </p>


    <!-- Trigger toggleText() when the
            button is clicked -->
    <button onclick="toggleText()" id="textButton">
        Show More
    </button>

    <script>
        function toggleText() {

            // Get all the elements from the page
            let points =
                document.getElementById("points");

            let showMoreText =
                document.getElementById("moreText");

            let buttonText =
                document.getElementById("textButton");

            // If the display property of the dots
            // to be displayed is already set to
            // 'none' (that is hidden) then this
            // section of code triggers
            if (points.style.display === "none") {

                // Hide the text between the span
                // elements
                showMoreText.style.display = "none";

                // Show the dots after the text
                points.style.display = "inline";

                // Change the text on button to
                // 'Show More'
                buttonText.innerHTML = "Show More";
            }

            // If the hidden portion is revealed,
            // we will change it back to be hidden
            else {

                // Show the text between the
                // span elements
                showMoreText.style.display = "inline";

                // Hide the dots after the text
                points.style.display = "none";

                // Change the text on button
                // to 'Show Less'
                buttonText.innerHTML = "Show Less";
            }
        }
    </script>
</body>
</html>