7

Como faço em HTML (ou CSS se tiver como) o texto de um link onde estar escrito "mostrar mais" mude para "mostrar menos" e vice-versa depois de clicado?

1
  • Sem javascript ou jQuery?
    – BrTkCa
    Commented 28/12/2016 às 16:44

3 Respostas 3

4

Solução com javascript, podes fazer assim:

const link = document.getElementById('my_link');
var less = false;

link.addEventListener('click', function(){
  this.innerHTML = (less = !less) ? 'Mostrar Menos' : 'Mostrar Mais';
});
<a id="my_link" href="#">Mostrar Mais</a>

4
  • Legal @Miguel! this.innerHTML = 'Mostrar menos' == this.innerHTML ? 'Mostrar mais' : 'Mostrar menos'; funciona também e dispensaria o if , a var less e o corpo ficaria com uma linha :)
    – BrTkCa
    Commented 28/12/2016 às 16:51
  • É verdade @LucasCosta, editada já. Obrigado
    – Miguel
    Commented 28/12/2016 às 16:52
  • Deu certo, vlw! :-)
    – MarsS
    Commented 28/12/2016 às 17:28
  • De nada @Marcio.sx, ainda bem (:
    – Miguel
    Commented 28/12/2016 às 17:29
3

Com jQuery é possível trocando o texto no evento click do link:

$("a").click(function(){
  var texto = $(this).text();
   $(this).text(texto == "Mostrar mais" ? "Mostrar menos" : "Mostrar mais");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#">Mostrar mais</a>

3

window.onload = function() {
  var el = document.getElementsByClassName('texto')[0];
  var btn = document.getElementById("read-more");

  btn.onclick = function() {
    if (btn.innerHTML == 'Mostrar Mais') {
      el.style.height = 'auto';
      btn.innerHTML = 'Mostrar Menos';

    } else {
      el.style.height = '40px';
      btn.innerHTML = 'Mostrar Mais';
    }
  }

}
.texto {
  overflow: hidden;
  height: 40px;
}
<div class="texto">
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero nemo veniam tempora saepe obcaecati quas enim officiis ad voluptate provident nisi dicta impedit, dolorem ipsam, reprehenderit pariatur laborum, odit temporibus! Lorem ipsum dolor sit amet,
  consectetur adipisicing elit. Odio atque eaque qui dicta ducimus, laboriosam in, laudantium maiores, animi ut error ullam soluta expedita illo tempora. Dolorem, aliquam quis nostrum.
</div>
<a href="#" id="read-more">Mostrar Mais</a>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .