El HTML relevante:
<div id="main"> <h2>Welcome!</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo posuere massa ut pharetra. Donec a quam ac elit eleifend fringilla sit amet in enim. Maecenas at nibh id ante cursus sodales. Duis eget feugiat velit. Sed nec posuere risus, at vulputate lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin eget accumsan felis, rutrum sagittis massa. maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria</p> <p class="event"><a href="#">Read more >></a></p> </div>El CSS:
#main { width: 60%; margin-left: auto; margin-right: auto; font-family: 'Roboto', sans-serif; color: rgb(224, 224, 224); } p { text-align: left; column-count: 2; max-height: 100px; overflow: hidden; } main.open{ max-height: 1000px;el JS:
var content = document.getElementById("main"); var event1 = document.getElementById("event"); event1.onclick = function(){ if(content.className == "open"){ content.className == ""; event1.innerHTML == "Read More"; } else { content.className == "open"; event1.innerHTML == "Show Less"; } };Agregué los id en los lugares correctos y corregí algunos errores como == en lugar de = para cambiar el innerText ... El uso de classList en lugar de className que permite usar algunos métodos como .contains() , .add() y .remove() .
Echar un vistazo ;)
var content = document.getElementById("content"); var event1 = document.getElementById("event1"); event1.onclick = function(){ if(content.classList.contains("open")){ content.classList.remove("open"); event1.innerText = "Read more >>"; } else { content.classList.add("open"); event1.innerText = "Show less <<"; } }; #main { width: 60%; margin-left: auto; margin-right: auto; font-family: 'Roboto', sans-serif; color: rgb(224, 224, 224); } p { text-align: left; column-count: 2; max-height: 100px; overflow: hidden; } .open{ overflow: unset; max-height: unset; } <div id="main"> <h2>Welcome!</h2> <p id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam commodo posuere massa ut pharetra. Donec a quam ac elit eleifend fringilla sit amet in enim. Maecenas at nibh id ante cursus sodales. Duis eget feugiat velit. Sed nec posuere risus, at vulputate lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Proin eget accumsan felis, rutrum sagittis massa. maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria maria</p> <p><a id="event1" href="#">Read more >></a></p> </div>