On a link href named read more, how do I add read more function properly with css and js?

Question

The relevant HTML:

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

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

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

};

Answer 1

I added the ids at the right places and corrected some mistakes like == instead of = to change the innerText... The use of classList instead of className which allows to use of some methods like .contains(), .add() and .remove().

Have a look ;)

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>