How can I work my JavaScript read more work-CodePudding

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  onclick="evtEllipse(this)">&hellip; read more</span>
  <span  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  onclick="evtEllipse(this)">&hellip; read more</span>
  <span  onclick="spanEllipse(this)">
      student abilities 
  and disabilities and also his weaknesses and strengths in English. 
  </span>
</p>

CodePudding user response：

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.

CodePudding user response：

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  >
    student abilities and disabilities and also 
    his weaknesses and strengths in English.
  </span>
</p>