affichage de DIV

Bonjour

Je voudrais à partir de boutons rendre visible ou non-visible une DIV
Quand je lance l'appli la DIV n'est pas visible :

Code:

---

<div id="Texte1" style="visibility:hidden">

---

Le code de mes boutons :

Code:

---

1 2	<button id="Lire1" onClick="JavaScript:Lire();">Lire</button> <button id="Ecouter1" onClick="JavaScript:Ecouter();">Ecouter</button>

---

Les fonctions :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12

<!-- function Lire() { document.getElementById('Texte1').style.visibility='visible'; } //--> <!-- function Ecouter() { document.getElementById('Texte1').style.visibility='hidden'; } //-->

---

Quand je lance mon appli

J'ai un espace blanc qui représente l'emplacement de ma DIV, donc un grand décalage avec le texte suivant.

Comment je peux rémédier à cela ?
Merci pour vos réponses

Bonsoir,

Utilise display:none et display:block pour afficher et cacher ton div.

Code:

---

<div id="Texte1" style="display:none">

---

Code:

---

1 2	<input type="button" id="Lire1" onclick="Lire();" value="Lire" /> <input type="button" id="Ecouter1" onclick="Ecouter();" value="Ecouter" />

---

Code:

---

1 2 3 4 5 6 7 8 9 10

function Lire() { document.getElementById('Texte1').style.display='block'; } //--> <!-- function Ecouter() { document.getElementById('Texte1').style.display='none'; }

---

A+.

Merci pour ce code, cela me convient parfaitement.

J'ai un autre problème je dois appliquer cela à plusieurs DIV : Texte2, Texte3, ect..
Est-il possible d'éviter de créer autant de boutons et de fonctions que de DIV ?

Merci pour ton aide

Code:

---

1 2 3 4

function Lire(id) { document.getElementById(id).style.display='block'; }

---

Code:

---

<input type="button" id="Lire1" onclick="Lire('Texte1');" value="Lire" />

---

Mais si une seule bouton pour tout afficher, tu peux faire

Code:

---

1 2 3 4 5 6 7

function Lire() { document.getElementById('Texte1').style.display='block'; document.getElementById('Texte2').style.display='block'; document.getElementById('Texte3').style.display='block'; //........ }

---

Tu peux aussi utiliser une boucle.

A+.

Merci pour ce code je prends la première solution

Est-il possible d'ajouter dans le click Ecouter

Code:

---

<audio src="bande_audio.mp3" controls preload></audio>

---

Est-ce cela le bon code pour rendre non-visible une div et lire un fichier audio
sachant que j'ai div Texte1, Texte2 etc..
et des fichiers Texte1.wav, Texte2.wav etc...

Mon fichier audio :

Code:

---

<audio src="Texte1.wav" controls preload></audio>

---

Ma fonction :

Code:

---

1 2 3 4 5

function Ecouter(id) { document.getElementById(id).style.display='none'; document.getElementById(id).play(); }

---

Mon bouton :

Code:

---

<input type="button" id="Ecoute1" onclick=Ecouter('Texte1');" value="Ecouter"/>

---

Es-tu vraiment sûr d'avoir compris à quoi sert document.getElementById() ? :roll:
Si oui, où se trouve l'id Texte1 dans ton code ? :?