11548 sujets

JavaScript, DOM et API Web HTML5

Afficher/masquer plusieurs div à un seul endroit

bonjour,
je réalise un site pour un architecte qui a des idées bien précises:
je souhaite que quand on clique sur chaque partie (about us, portfolio..) en dessous et tjrs au même endroit un texte différent s'affiche.
j'ai essayé avec du js et des fonctions togle mais cela affiche le texte en dessous mais pas au même endroit ou alors toutes les div se mélange...

c'est assez urgent je rend le site a la fin du mois merci de m'aider car j'ai cherché partout
Modifié par Blackbird75 (25 Feb 2012 - 20:29)
Bonjour,

Tu étais pourtant sur la bonne vois avec le JS.

Après, si tu maitrise mal les CSS, c'est un autre problème. Pour le résoudre, il faudrait que tu commence par afficher ta page "résultat", histoire d'être certain que tout est au bon endroit.
au niveau du css j'essaie de faire deux fonctions déjà, avec des noms différents mais quand on clique sur le bouton portfolio cela affiche tjr le texte de about us, je ne comprend pas.
c'est plutot au niveau du JS que j'ai des lacunes.

<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");

var text = document.getElementById("displayText");
if(ele.style.display == "block")
{
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>

<script language="javascript">
function toggle2() {
var ele2 = document.getElementById("toggleText2");

var text2 = document.getElementById("displayText2");
if(ele.style.display == "block")
{
ele.style.display = "none";
}
else {
ele.style.display = "block";
}
}
</script>

<div id="toggleText" style="display: none" align="justify"><h1> xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.</h1></div>

<div id="toggleText2" style="display: none" align="justify"><h1>autre texte</h1></div>
Modifié par Blackbird75 (25 Feb 2012 - 20:26)
Hello,

Pour faire plus simple, tu peux faire une seule fonction :

function toggle(ele) {
   var text = document.getElementById("displayText");
   if(ele.style.display == "block")
   {
      ele.style.display = "none";
   }
   else {
      ele.style.display = "block";
   }
}

et dans le html :

<a href="javascript:toggle('toggleText');">menu1</a>
<a href="javascript:toggle('toggleText2');">menu2</a>
etc...
Etudions ton code pour voir ce qui cloche :

   if(ele.style.display == "block")
   {
      ele.style.display = "none";
   }
   else {
      ele.style.display = "block";
   }

En gros tu dis que si ton élément est visible, tu le caches sinon tu l'affiches. Donc déjà ton else ne sert à rien puisque si ton élément est déjà visible, je ne vois pas l'intérêt de l'afficher. Je te propose donc de plutôt masquer tous les blocs lors d'un clic sur un des menus quel qu'il soit, puis de n'afficher ensuite que celui concerné. Pour cela, il faut donner une classe à tous tes blocs de texte en plus de l'id. Ça donnerait donc quelque chose comme ça :


<a href="javascript:toggle('toggleText');">menu1</a>
<a href="javascript:toggle('toggleText2');">menu2</a>
etc...
<div id="toggleText" class="texte" style="display: none">Mon texte 1</div>
<div id="toggleText2" class="texte" style="display: none">Mon texte 2</div>
etc...

et pour le javascript (avec Jquery) :

function toggle(ele) {
   $(".texte").hide();
   $("#"+ele).show();
}
Sujet clos
Aller à