Afficher / Masquer div au clic
htmllola
Messages postés
1
Date d'inscription
Statut
Membre
Dernière intervention
-
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
jordane45 Messages postés 38486 Date d'inscription Statut Modérateur Dernière intervention -
Bonjour,
je souhaite pouvoir avoir sur mon site une liste de sujets : Lorsqu'on clique sur le sujet 1, le texte 1 apparaît. Si on clique de nouveau sur le sujet 1, le texte disparaît. ET, si on clique sur le sujet 2, le texte qui se rapporte au sujet 2 apparaît et celui qui se rapporte au sujet 1 disparaît automatiquement.
Pour l'instant j'ai ce code :
<html>
<head>
<script type="text/javascript">
function showHide[sweatdrop]Div(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
</script>
</head>
<body>
<a onClick="showHideDiv('ID1')";" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 1</strong></p></a>
<div align="justify" id="ID1" style="display:none;"> Texte sujet 1</a> </div>
<a onClick="showHideDiv('ID2')";" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 2</strong></p></a>
<div align="justify" id="ID2" style="display:none;"> Texte sujet 2</a> </div>
Ce code me convient presque, quand je clique sur "Sujet 1", le texte 1 s'affiche, quand je clique sur "Sujet 2", le texte 2 s'affiche.
Il manque juste la fonction pour cacher le texte 1 quand je clique sur le sujet 2.
Pour cela j'avais ce code :
<head>
<script>
var _hidediv = null;
function visibilite(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>
<body>
<a onclick="visibilite('ID1');" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 1</strong></p></a>
<div align="justify" id="ID1" style="display:none;">
Texte sujet 1</div>
<a onclick="visibilite('ID2');" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 2</strong></p></a>
<div align="justify" id="ID2" style="display:none;">
Texte sujet 2</div>
Mais ce code ne me permet pas de cacher le texte 1 quand je clique sur "Sujet 1"..
Comment faire pour avoir tout ce que je veux en un seul code ? ^^
Merci beaucoup
j'espère avoir été assez claire...
je souhaite pouvoir avoir sur mon site une liste de sujets : Lorsqu'on clique sur le sujet 1, le texte 1 apparaît. Si on clique de nouveau sur le sujet 1, le texte disparaît. ET, si on clique sur le sujet 2, le texte qui se rapporte au sujet 2 apparaît et celui qui se rapporte au sujet 1 disparaît automatiquement.
Pour l'instant j'ai ce code :
<html>
<head>
<script type="text/javascript">
function showHide[sweatdrop]Div(ele) {
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}
else {
srcElement.style.display = 'block';
}
return false;
}
}
</script>
</head>
<body>
<a onClick="showHideDiv('ID1')";" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 1</strong></p></a>
<div align="justify" id="ID1" style="display:none;"> Texte sujet 1</a> </div>
<a onClick="showHideDiv('ID2')";" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 2</strong></p></a>
<div align="justify" id="ID2" style="display:none;"> Texte sujet 2</a> </div>
Ce code me convient presque, quand je clique sur "Sujet 1", le texte 1 s'affiche, quand je clique sur "Sujet 2", le texte 2 s'affiche.
Il manque juste la fonction pour cacher le texte 1 quand je clique sur le sujet 2.
Pour cela j'avais ce code :
<head>
<script>
var _hidediv = null;
function visibilite(id) {
if(_hidediv)
_hidediv();
var div = document.getElementById(id);
div.style.display = 'block';
_hidediv = function () { div.style.display = 'none'; };
}
</script>
</head>
<body>
<a onclick="visibilite('ID1');" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 1</strong></p></a>
<div align="justify" id="ID1" style="display:none;">
Texte sujet 1</div>
<a onclick="visibilite('ID2');" href="#"><p class="ms-rteFontFace-5 ms-rteThemeBackColor-1-2" style="text-align: left;"><strong class="ms-rteFontSize-2 ms-rteThemeForeColor-5-4">Sujet 2</strong></p></a>
<div align="justify" id="ID2" style="display:none;">
Texte sujet 2</div>
Mais ce code ne me permet pas de cacher le texte 1 quand je clique sur "Sujet 1"..
Comment faire pour avoir tout ce que je veux en un seul code ? ^^
Merci beaucoup
j'espère avoir été assez claire...
A voir également:
- Afficher / Masquer div au clic
- Windows 11 clic droit afficher plus d'options par défaut - Guide
- Afficher appdata - Guide
- Masquer conversation whatsapp - Guide
- Comment masquer les amis sur facebook - Guide
- Comment appeler en masquer - Guide
1 réponse
Bonjour,
Déjà, pour poster ton code, merci d'utiliser les balises de code
explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite, ta question concernant le Javascript... je l'ai déplacée dans le bon forum.
Et enfin.. concernant ton besoin :
Etape 1 : Masquer toutes les div de text
Etape 2 : Afficher la Div voulue si elle n'est pas déjà affichée.. dans le cas contraire, la masquer.
Pour l'étape 1 il faut mettre une class commune à toutes tes div de texte.
idem pour la seconde
Cela te permettra de les cibler facilement
https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName
Pour l'étape 2 .. tu peux t'inspirer de ton premier code
Et pour l'utiliser
Déjà, pour poster ton code, merci d'utiliser les balises de code
explications disponibles ici : https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code
Ensuite, ta question concernant le Javascript... je l'ai déplacée dans le bon forum.
Et enfin.. concernant ton besoin :
Etape 1 : Masquer toutes les div de text
Etape 2 : Afficher la Div voulue si elle n'est pas déjà affichée.. dans le cas contraire, la masquer.
Pour l'étape 1 il faut mettre une class commune à toutes tes div de texte.
<div class="div_text" align="justify" id="ID1" style="display:none;"> Texte sujet 1</div>
idem pour la seconde
<div class="div_text" align="justify" id="ID2" style="display:none;"> Texte sujet 1</div>
Cela te permettra de les cibler facilement
https://developer.mozilla.org/fr/docs/Web/API/Document/getElementsByClassName
Pour l'étape 2 .. tu peux t'inspirer de ton premier code
function showHide(ele) {
//ETAPE 1
var allElmClass = document.getElementsByClassName('div_text');
for (var i = 0; i < allElmClass.length; ++i) {
var item = allElmClass[i];
item.style.display = 'none';
}
//ETAPE 2
var srcElement = document.getElementById(ele);
if (srcElement != null) {
if (srcElement.style.display == "block") {
srcElement.style.display = 'none';
}else {
srcElement.style.display = 'block';
}
return false;
}
}
Et pour l'utiliser
<a onclick="showHide('ID2');" href="#">
