CODEWITHSUNDEEP
javascripthtml
sk_225
sk_225

Reputation: 425

"Show more" link to append more text to page?

Could someone help correct and explain to me why my JS code for toggling between showing more text and less text is not working? I want to have a user click on the "Show More" button to display more text, and allow them to click "Show Less" to go back to the original state.

HTML

<div class="content-section">
    <h1>Our Team</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In sunt aut deleniti nihil quidem, maxime rem numquam ea quibusdam ut commodi hic fuga dolorum. Ab reprehenderit dolorem nemo error illo. Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem accusamus eum nam nobis officia?<a class="toggleButton" onclick="toggleText();" href="javascript:void(0);"> Show More </a>
        <p class="show-text"></p>
    </p>
</div>

JS

var status = "less"

function toggleText() {

    var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

    if (status == "less") {
        document.getElementsbyClassName("show-text").innerHTML = introText;
        document.getElementsbyClassName("toggleButton").innerText = "Show Less"
        status = "more";
    } else if (status == "more") {
        document.getElementsbyClassName("show-text").innerHTML = "";
        document.getElementsbyClassName("toggleButton").innerText = "Show More";
        status = "less";
    }
}

Upvotes: 1

Views: 110

Answers (2)

shihab mm
shihab mm

Reputation: 525

use this this is working fine.

<script type="text/javascript">
        var status = "less";
        var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

        function toggleText()
        {
            if (status == "less") {
                document.getElementsByClassName("show-text")[0].innerHTML = introText;
                document.getElementsByClassName("toggleButton")[0].innerText = "Show Less"
                status = "more";
            }

            else if (status == "more") {
                document.getElementsByClassName("show-text")[0].innerHTML = "";
                document.getElementsByClassName("toggleButton")[0].innerText = "Show More";
                status = "less";
            }
        }
</script>

Upvotes: 0

Adil
Adil

Reputation: 148110

There are two problems

  • Wrong getElementsbyClassName spelling, it should be getElementsByClassName
  • Access element from the given collection returned by getElementsByClassName using the indexer.

Live Demo

var status = "less";

function toggleText() {

    var introText = "Animi magni modi laudantium nisi eum cum sit minus. Repellat, esse nobis itaque ratione officia suscipit quo, saepe ipsam ab consequatur iusto commodi, quis praesentium aut consectetur sapiente officiis nesciunt quisquam velit magnam sequi nulla optio. Rem accusamus eum nam nobis officia?";

    if (status == "less") {
        document.getElementsByClassName("show-text")[0].innerHTML = introText;
        document.getElementsByClassName("toggleButton")[0].innerText = "Show Less";
        status = "more";
    } else if (status == "more") {
        document.getElementsByClassName("show-text")[0].innerHTML = "";
        document.getElementsByClassName("toggleButton")[0].innerText = "Show More";
        status = "less";
    }
}

Upvotes: 1

Related Questions