Hide and reveal text using Javascript

Question

I have a div that has news, I need to hide a part of the text when the file is read by the browser, in addition the user can see the full text if he wants to click on "See More" which is a tag <a> and then reduce it. I came to this:

<script type="text/javascript">
//quando a pagina for carregada o texto da notícia será reduzido a 100 letras apenas.
$(document).ready(function(){
    txt = document.getElementById('texto-principal-noticia').innerHTML;
    var txt2 = txt.substr(0,100);
    var complemento = '...';
    txt3 = txt2 + complemento;
    document.getElementById('texto-principal-noticia').innerHTML = txt3;
});
    function Mostrar(){
       if(txt<txt3){
           document.getElementById('texto-principal-noticia').innerHTML = txt;
           document.getElementById('link-noticia').innerHTML = 'Mostrar Menos'; 
       }else{
           document.getElementById('texto-principal-noticia').innerHTML = txt3;
           document.getElementById('link-noticia').innerHTML = 'Mostrar Mais'; 
       }
}

With this you can hide the text and open it when the function mostrar is called, but when the function is called again to this time hide the text it does not work, someone knows tell me why?

I think the problem is in the probation check, but when I change the operators it still doesn’t work.

Answer 1

In the if, you should buy the size of the text (in characters) and not as if they were the whole type. Something like this:

if(txt.length < txt3.length) //aqui, eu verifico a quantidade de caracteres no texto.

Answer 2

You don’t need this

var complemento = '...';
txt3 = txt2 + complemento;

In addition, the answer of dvd is absolutely correct, look

$(document).ready(function(){
   txt = document.getElementById('texto-principal-noticia').innerHTML;
   txt2 = txt.substr(0,100)+'...';
   document.getElementById('texto-principal-noticia').innerHTML = txt2;

  if(txt<txt2 ){
    document.getElementById('texto-principal-noticia').innerHTML = txt;
    document.getElementById('link-noticia').innerHTML = 'Mostrar Menos'; 
  }else{
     document.getElementById('texto-principal-noticia').innerHTML = txt2;
     document.getElementById('link-noticia').innerHTML = 'Mostrar Mais'; 
  }
});
    
function Mostrar(){

   if(document.getElementById('link-noticia').innerHTML == 'Mostrar Mais'){
     document.getElementById('texto-principal-noticia').innerHTML = txt;
     document.getElementById('link-noticia').innerHTML = 'Mostrar Menos'; 
   }else{
     document.getElementById('texto-principal-noticia').innerHTML = txt2;
     document.getElementById('link-noticia').innerHTML = 'Mostrar Mais'; 
   }

}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

    <p id="texto-principal-noticia">
    O que é Lorem Ipsum?
    Lorem Ipsum é simplesmente uma simulação de texto da indústria tipográfica e de impressos, e vem sendo utilizado desde o século XVI, quando um impressor desconhecido pegou uma bandeja de tipos e os embaralhou para fazer um livro de modelos de tipos. Lorem Ipsum sobreviveu não só a cinco séculos, como também ao salto para a editoração eletrônica, permanecendo essencialmente inalterado. Se popularizou na década de 60, quando a Letraset lançou decalques contendo passagens de Lorem Ipsum, e mais recentemente quando passou a ser integrado a softwares de editoração eletrônica como Aldus PageMaker.
    </p>
    <button id="link-noticia" onclick="Mostrar()">Mostrar Mais</button>

Answer 3

You can directly compare the innerHTML in the element #link-noticia:

function Mostrar(){
   if(document.getElementById('link-noticia').innerHTML == 'Mostrar Mais'){
     document.getElementById('texto-principal-noticia').innerHTML = txt;
     document.getElementById('link-noticia').innerHTML = 'Mostrar Menos'; 
   }else{
     document.getElementById('texto-principal-noticia').innerHTML = txt3;
     document.getElementById('link-noticia').innerHTML = 'Mostrar Mais'; 
   }
}