Afficher/Masquer du texte à partir d'un link

bruno-1226
Javascript

Bonjour à tous,

J'aimerais pouvoir afficher du texte(qui est masqué en css), cela en cliquant sur un simple link(lien ou balise <a>).

Mais le souci c'est que lorsque je clique sur le lien, le texte s'affiche pour quelques millièmes de secondes.

html:

<h2 class="link"><a href="" onclick="display('text');">Lien</a></h2>

<div id="text">texte à afficher</div>

css:

#text {

    display: none;

}

javascript:

function display(id) {

  if (document.getElementById("text").style.display=="none") {

    document.getElementById(id).style.display = "block";   

  }

  else {

    document.getElementById("text").style.display = "none";

  }

}

Merci d'avance pour votre aide

Cordialement

2 réponses

ProDJy
Réponse acceptée

Salut @bruno-1226,

Ton problème vien du fais que ton lien au moment du clique recharge ta page je te conseil donc de modifier ton code actuelle

<h2 class="link"><a href="" onclick="display('text');">Lien</a

par

<h2 class="link"><a href="#!" onclick="display('text');">Lien</a

ton lien pointera sur la page actuelle (id inexistant) et ne rechargera pas la page.

Sinon il t'es possible d'utiliser jquery en fesant quelque chose comme ça

$(".link a").on("click", function(event){
    event.preventDefault();
    $("#test").toggle();
});

Mais il te faudra importer Jquery via jQuery

J'espere que cela t'aura aider dans ton travail

bruno-1226
Auteur

Salut à toi @ProDJy ,
Tout d'abord je te remercie pour ta réponse, mais nénmoins cette solution ne fonctionne pas parfaitement, car au premier clic l'action ne fonctionne pas. On peux eviter cela en mettant le style dans la balise html
<div id="text" style="display:none;">

Merci, ce problème est résolu.