5568 sujets

Sémantique web et HTML

Afficher/Masquer une DIV au clic

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...
Sujet clos
Aller à