par
mere-teresa » 28 juin 2005, 09:50
Joue avec les styles CSS, Javascript allant modifier les styles par clic sur lien ou bouton.
Tu as deux solutions :
- celle proposée par PhilFree = jouer sur le display (inline/block ou none).
Conséquences : la place n'est pas réservée pour l'élément et il pousse les autres éléments de la page.
- modifier visibility (hidden/visible) : même invisible la place où se trouve l'élément (paragraphe, div, etc...) est conservée dans la mise en page.
Le javascript
Code : Tout sélectionner
function afficheSuite(id, symbole){
div = document.getElementById(id);
//alert(div.style.display);
if(div.style.display == 'inline'){
div.style.display = 'none';
modifSymbole(symbole, '+');
}else{
div.style.display = 'inline';
modifSymbole(symbole, '-');
}
}
function cacherSuite(){
div = document.getElementById(id);
//alert(div.style.display);
div.style.display = 'none';
}
Dans le HTML
Code : Tout sélectionner
<a href="#" onClick="javascript:afficheSuite('tout','plus1');" id="plus1">[+]</a>
[color=darkblue]Joue avec les styles CSS, Javascript allant modifier les styles par clic sur lien ou bouton.
Tu as deux solutions :
- celle proposée par PhilFree = jouer sur le display (inline/block ou none).
Conséquences : la place n'est pas réservée pour l'élément et il pousse les autres éléments de la page.
- modifier visibility (hidden/visible) : même invisible la place où se trouve l'élément (paragraphe, div, etc...) est conservée dans la mise en page.
Le javascript[/color]
[code]function afficheSuite(id, symbole){
div = document.getElementById(id);
//alert(div.style.display);
if(div.style.display == 'inline'){
div.style.display = 'none';
modifSymbole(symbole, '+');
}else{
div.style.display = 'inline';
modifSymbole(symbole, '-');
}
}
function cacherSuite(){
div = document.getElementById(id);
//alert(div.style.display);
div.style.display = 'none';
}[/code]
[color=navy]Dans le HTML[/color]
[code]<a href="#" onClick="javascript:afficheSuite('tout','plus1');" id="plus1">[+]</a>[/code]