Lors du post, j'ai hésité entre le forum css et le forum javascript.
Il semblerait que ce soit un problème js bien que je ne soit certain qu'il ne puisse pas être résolu via les css...
J'ai reproduit mon problème en adaptant cet exemple Mootools :
http://demos111.mootools.net/Fx.Slide
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>mootools demos - Fx.Slide Demo</title>
<script type="text/javascript" src="http://demos111.mootools.net/demos/mootools.svn.js"></script>
<style type="text/css">
#contenant {
background: #fff;
color: black;
padding: 10px;
margin: 20px;
border: 1px solid black;
}
#contenu_1, #contenu_2 {
background: #fff;
color: black;
padding: 10px;
margin: 20px;
border: 1px solid black;
}
</style>
<script type="text/javascript">
window.addEvent('domready', function(){
//-vertical
var mySlide = new Fx.Slide('contenant');
mySlide.hide();
var status = 1;
$('slide').addEvent('click', function(e){
e = new Event(e);
if (status == 1) {
mySlide.slideIn();
status = 0;
} else {
mySlide.slideOut();
status = 1;
}
e.stop();
});
var mySlide_1 = new Fx.Slide('contenu_2');
mySlide_1.hide();
var status_1 = 1;
$('slide_1').addEvent('click', function(e){
e = new Event(e);
if (status_1 == 1) {
mySlide_1.show();
/* mySlide.show(); */
status_1 = 0;
} else {
mySlide_1.hide();
status_1 = 1;
}
e.stop();
});
});
</script>
</head>
<body>
<h3 class="section">Fx.Slide Vertical</h3>
<a id="slide" href="#">slide</a>
<div id="contenant">
<div id="contenu_1">
<a id="slide_1" href="#">slide</a>
</div>
<div id="contenu_2">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
</div>
</body>
</html>
Tel quel, le texte du bloc 'contenu_2' ne sera pas affiché en totalité car le bloc 'conteneur' ne tiendra pas compte du nouveau contenu à afficher et s'actualisera pas.
Par contre, si on dé-commente la ligne :
/* mySlide.show(); */
alors on force le bloc 'conteneur' à se réactualiser et ça marche...
C'est assez empirique faute d'une connaissance précise de ce qui ce passe derrière.
-Fly06