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?
3 Respostas
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>
-
Legal @Miguel!
this.innerHTML = 'Mostrar menos' == this.innerHTML ? 'Mostrar mais' : 'Mostrar menos';
funciona também e dispensaria oif
, avar less
e o corpo ficaria com uma linha :)– BrTkCaCommented 28/12/2016 às 16:51 -
-
-
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>
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>