Javascript: How to add multiple Show More and Show Less buttons on a page

Code found, working:

<head>
    <style>
        #moreText {
            display: none;
        }
    </style>
</head>

<body>

    <p>
        First sentence.
            <span id="points">...</span>
            <!--text to hide -->
            <span id="moreText">Text to be revealed when clicking "Show More".
            </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
                var points = 
                    document.getElementById("points");

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

                var 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>

Source: https://www.geeksforgeeks.org/how-to-create-show-more-and-show-less-functionality-for-hiding-text-using-javascript/

However, the code above only works when there is only one "Read More" button, as it is based on ID, of which there can only be one in a page.

To make it work when multiple buttons on the same page:

<head>
    <style>
        #moreText {
            display: none;
        }
    </style>
</head>

<body>

    <p>
        First sentence.
            <span id="points">...</span>
            <!--text to hide -->
            <span id="moreText">Text to be revealed when clicking "Show More".
            </span>
    </p>

    <!-- Show More/Less button -->
    <button onclick="toggleText(event)" id="textButton"> <!-- adding (event) is critical -->
        Show More
    </button>

    <!-- script before closing body tag -->
    <script>
        function toggleText(event) {

            let btn = event.target; // element that was clicked
            let parent = btn.parentElement; // its parent
            var points = parent.querySelector("#points");
            var showMoreText = parent.querySelector("#moreText");
            var buttonText = parent.querySelector("#textButton");

            if (points.style.display === "none") {

                showMoreText.style.display = "none";

                points.style.display = "inline";

                buttonText.innerHTML = "Show More";
            }

            else {

                showMoreText.style.display = "inline";

                points.style.display = "none";

                buttonText.innerHTML = "Show Less";
            }
        }
    </script>

</body>

Source: https://stackoverflow.com/questions/67515248/js-code-for-multiple-show-more-buttons-in-html

links

social