Hide and reveal text using JavaScript [duplicate]

Question

Hide and reveal text using JavaScript [duplicate]

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)

2

I have a div that has a 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 you want by clicking "View More" which is a <a> and then make it reduced. 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 hide the text this time it does not work, can someone tell me why?

I think the problem is in the conditional check, but when I change the operators it still does not work.

javascript jquery html5

asked by anonymous 14.04.2018 / 04:12

3 answers

Submit only one element of two with same name Masking SQL Select Return

score 2 · Answer 1

2

In if, you should buy the text size (in characters) and not as an integer type. Something like this:

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

14.04.2018 / 04:23

score 1 · Answer 2

You can directly compare innerHTML in 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'; 
   }
}

score 1 · Answer 3

You do not need this

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

In addition, the response of dvd is correct, see

$(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><pid="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>