[xhtml/css] faire apparaitre/disparaitre un div

[njoyard]

Salut !

Alors ma question est simple: est-il possible de changer la propriété display d'un élément (par exemple la passer de block à none), en cliquant sur un lien, mais sans javascript ? Il me semble que non ( ) mais, on sait, jamais, peut être qu'un éclairé aura la réponse... (Nyro... Au secours )

[Nyro Xeo]

Faire disparaître/apparaître un <div> est possible, mais ça ne fonctionnera pas sous IE.

En effet, la méthode consisterait à mettre ce <div> dans un autre <div>, le mettre à display:none, et le faire apparaître que lorsque la souris se trouve au-dessus du <div> conteneur (grâce à :hover) :

<div class="info">Montrer/cacher
<div>Texte et éléments...</div>
</div>

.info

{

/* Effet de lien */

text-decoration: underline;

color: blue;

}

.info:hover

{

/* Effet de lien */

cursor: pointer;

color: red;

text-decoration: none;

}

.info div

{

/* On cache le <div>... */

display: none;

}

.info:hover div

{

/* ...Et on ne l'affiche que si la souris passe au-dessus du premier */

display: block;

color: black;

text-align: center;

background-color: yellow;

/* Positionnement en absolute pour pouvoir afficher le bloc "n'importe où" */

position: absolute;

width: 200px;

height: 50px;

left: 50%;

margin-left: -100px;

}

Mais donc pour la compatibilité avec IE, on fait ça avec un lien :

<a class="info" href="#null">Montrer/Cacher<span>Texte et éléments...</span></a>

.info span

{

/* On cache le <span>... */

display: none;

}

.info:hover span

{

/* ...Et on ne l'affiche que si la souris passe au-dessus du premier */

display: block;

color: black;

text-align: center;

background-color: yellow;

/* Positionnement en absolute pour pouvoir afficher le span (transformé en bloc) "n'importe où" */

position: absolute;

width: 200px;

height: 50px;

left: 50%;

margin-left: -100px;

}

Voilà, c'est simple et logique, non !? :)

[njoyard]

la rapidité! bravo et merci (et merci aussi d'avoir pris le temps de bien présenter et tout...) !

edit (oublié de tt lire)

mais c'est complêtement impossible de le faire sur un clic, j'imagine...

[SIBELIUS]

Tiens, un Nyro Xeo :)

Pour aller un peu plus loin que les (très bonnes) explications de Nyro Xeo, je te propose un tutoriel complet :

http://css.alsacreations.com/Tutoriels-et-...sans-javascript

Avec un exemple concret : http://css.alsacreations.com/xmedia/exempl...age/affiche.htm

Tu peux même utiliser cette technique pour faire des infobulles personnalisées : http://forum.alsacreations.com/faq/#item11

Sinon, pour répondre à ta question, il n'y a que JavaScript qui gère les clics sur la page. Les CSS se contentent pour l'instant au survol, avec :hover

[njoyard]

ouioui merci Sib, j'ai deja lu tout ça cet aprem...

Mais vu que le contenu de mon truc a montrer/cacher est long et nécessite un scroll de la page, il faut absolument que ça se déclenche sur un clic... Donc tant pis, javascript + version noscript (pfffouh)

[Nyro Xeo]

Tiens, un SIBELIUS :-P Le monde est fort petit :)

k-o-x> Tu peux le faire en JavaScript pour autant de laisser accessible le contenu sans ce dernier activé. Par exemple, s'il s'agit d'un menu déroulant, on peut imaginer un script de ce genre :

<div class="menu">
		<h3>Titre</h3>
		<ul>
			<li><a href="#null">Élement</a></li>
			<li><a href="#null">Élement</a></li>
			<li><a href="#null">Élement</a></li>
		</ul>
	</div>

.menu h3

{

cursor: pointer;

}

var type = 'block';
window.onload = function()
{
var div = document.getElementsByTagName('div');
for(var i=0;i<div.length;i++)
{
 if (div[i].className == 'menu')
 {
 	div[i].getElementsByTagName('ul')[0].style.display= 'none';
 	div[i].getElementsByTagName('h3')[0].onclick = hide;
 	div[i].getElementsByTagName('h3')[0].UL = div[i].getElementsByTagName('ul')[0];
 }
}
}
function hide()
{
this.UL.style.display = type;
type = (type == 'block') ? 'none' : 'block';
}

[Edit] Ouais enfin sauf que là, il faudrait mettre un lien au lieu du <h3>, sinon la navigation par souris ne sera pas possible... ^^

[njoyard]

Je pense à un truc juste avant d'aller me coucher: on pourrait pas faire la même chose avec un clic en utilisant :active ?

[Nyro Xeo]

Dans ce cas, le bloc n'apparaîtrait qu'au moment du clic (si on relâche, le bloc disparaît à nouveau). Et de plus, cette solution ne fonctionnerait pas sous Internet Explorer.

[njoyard]

pour ceux que ça intéresserait:

j'ai finalement adopté une solution bourrine : mixer javascript + php pour que ça marche chez tout le monde

je m'explique: j'ai une page avec 8 DIV cachés affichables par 8 liens.

lorsuq'on appelle la page sans argument, tous les div sont inclus et cachés (display:none;).

apres mes liens sont créés par un truc de la forme :

<script language="javascript">
<!--
   document.write('<a href="#null" onclick="afficher(num);">afficher n°1</a>');
// -->
</script>
<noscript>
   <a href="lapage.php?num=le_num_du_div_a_afficher">afficher n°1</a>
</noscript>

ce qui fait que les gens ayant le script activé auront les liens javascript et les autres les liens vers la page + argument...

...et lorsque la page est appelée avec un argument num, seul le div correspondant est inclus dans la page et il est affiché directement.

Avec un système similaire pour les liens de masquage des divs.

Et ça marche partout ! Et c'est valide ! Et c'est indexé correctement par les crawlers !