How can I work my JavaScript read more work

Question

I found some script for read more / less text. The script works perfectly in my laptop, but when I upload it on the server it doesn't work. You can have a look here: www.engliScare.net in the section of Lesson offers. it just shows there "read more" but shows the hidden text too. I wonder why, since it works fine on my laptop. Here's the code:

js/hide.js

function evtEllipse(info) {
  info.nextElementSibling.classList.toggle('hide');
  info.classList.toggle('hide');
}
function spanEllipse(info) {
  info.classList.toggle('hide');
  info.previousElementSibling.classList.toggle('hide')
}

and this is how it looks:

<p>
  are held between the teacher and the student. All attention is given to the only student and the teacher gets to know the
  <span class="read_button" onclick="evtEllipse(this)">&hellip; read more</span>
  <span class="hide" onclick="spanEllipse(this)">
      student abilities 
  and disabilities and also his weaknesses and strengths in English. 
  </span>
</p>

of course I added the script like this:

    <script src="js/hide.js"></script>

and this is CSS:

    .hide {
  display: none;
}
.read_button {
  font-size: 1rem;
  font-weight: bold;
  color: #F56692;
  background-color: Transparent;
  background-repeat:no-repeat;
  border: none; 
  padding: 2px 2px 2px 2px;
  color: var(--color-secondary);
  cursor: pointer;
}
.read_button:hover{
  color: #2a2e35;
  font-size: 1.1rem;
  color: var(--color-grey-1);
  cursor: pointer;

}

As a snippet:

 function evtEllipse(info) { info.nextElementSibling.classList.toggle('hide'); info.classList.toggle('hide'); } function spanEllipse(info) { info.classList.toggle('hide'); info.previousElementSibling.classList.toggle('hide') }

 .hide { display: none; }.read_button { font-size: 1rem; font-weight: bold; color: #F56692; background-color: Transparent; background-repeat: no-repeat; border: none; padding: 2px 2px 2px 2px; color: var(--color-secondary); cursor: pointer; }.read_button:hover { color: #2a2e35; font-size: 1.1rem; color: var(--color-grey-1); cursor: pointer; }

 <p> are held between the teacher and the student. All attention is given to the only student and the teacher gets to know the <span class="read_button" onclick="evtEllipse(this)">&hellip; read more</span> <span class="hide" onclick="spanEllipse(this)"> student abilities and disabilities and also his weaknesses and strengths in English. </span> </p>

Answer 1

ouch.. I see it now.. You guys are awesome.. Don't know why but my laptop doesn't let me to upload the hide.js to the FTP. Always shows error. Didn't see it before and didn't know it didn't upload there., I think there is some issue with the provider. Anyway. thank you for super fast reply and for your time. I owe you.

EDIT. I added the script there, but it still doesn't work. Now it is exactly the same like in my laptop. But still doesn't work. How can I share with you the error code? It doesn't shows me any.

Answer 2

YOu can also use that...

 document.querySelectorAll('span.MoreLess').forEach( sp => sp.onclick =_=> sp.classList.toggle('less') )

 span.MoreLess { cursor: zoom-out; } span.MoreLess.less { font-size: 0; /* hide span content */ cursor: zoom-in; } span.MoreLess.less::after { font-size: 1rem; content: '\2026 read more'; font-weight: bold; } span.MoreLess.less:hover::after { font-size: 1.1rem; }

 <p> are held between the teacher and the student. All attention is given to the only student and the teacher gets to know the <span class="MoreLess less" > student abilities and disabilities and also his weaknesses and strengths in English. </span> </p>