«Показать больше», чтобы добавить больше текста на страницу?

Question

Может ли кто-то помочь исправить и объяснить мне, почему мой JS-код для переключения между отображением большего текста и меньше текста не работает? Я хочу, чтобы пользователь нажал кнопку «Показать больше», чтобы отобразить больше текста, и разрешите им нажать «Показать меньше», чтобы вернуться в исходное состояние.

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"; 
    } 
} 

Answer 1

Есть две проблемы

• Неправильный getElementsbyClassName правописание, оно должно быть getElementsByClassName
• элемент доступа из данной коллекции, возвращаемой getElementsByClassName с помощью индексатора.

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"; 
    } 
} 

Answer 2

использовать это, это работает отлично.

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