Bonjour tout le monde,

Je sollicite votre aide car je n'arrive pas vraiment au résultat escompté.

La div que je souhaite afficher et masqué se trouve être mon footer. J'arrive à l'afficher et le masquer avec un clic, mais la div cachée, s'affiche sans effet (d'un coup) et vers le bas or je souhaiterai qu'elle s'affiche avec un petit effet (je crois que c'est un slide le terme exacte) et vers le haut.

Pour plus de compréhension voici deux images :

L'état par défaut :



Une fois cliqué :



voici mon code :

<script type="text/javascript">

     function cachetr(idTemp) {

          var idT =idTemp;

        

        

         if (document.getElementById(idT).style.display == 'none') {

             document.getElementById(idT).style.display = '';

         } 

         

         

         else { document.getElementById(idT).style.display = 'none' }

     }

</script>

et le code html :

<footer><h1><a onclick="cachetr('footerplus');" href="#">Un peu plus ?</a></h1>
       <div id="footerplus" style="display:none; border-top:solid 1px white; margin-left:10px; margin-right:145px;"> blablabla blabla blabla blabla blabla blalb alb alblalb alb azlb azl</div> </footer>

Donc comme ont peu le voir sur les images, la div s'affiche vers le haut et par dessus les éléments supérieures. Ce qui n'est pas le cas avec le code que j'utilise.

Pourriez-vous m'aider pour arriver au bon résultat ?

Tu devrais relire ton code Javascript... Tu peux pas mettre un seul égal pour une condition de ce type (dans le else).

Et puis, tu dois mettre display = 'block', au lien de display = ''.

C'est à cela que servent les frameworks : ils gèrent les transitions pour toi.

Sinon tu peux le faire à la main avec des timers, mais ça risque de devenir vite ingérable si tu as différentes propriétés et une taille variable.

Tu peux si non utilisé Jquery :

$('#idTemp').slideDown(temps de déroulement en ms); pour l'afficher
$('#idTemp').slideUp(temps de déroulement en ms); pour le cacher

Bonjour à vous, merci de me répondre!

Thunderseb, lorsque je rajoute un deuxième égal dans ma condition, le deuxième click pour masquer ne fonctionne plus.

viki53 si tu parles des effets que l'on trouve sur le site de JQuery, je n'ai pas trouvé celui que je souhaite faire. Je comprends peut-être pas très bien ton message après...

J'ai oublié, je ne suis pas un grand spécialiste du JavaScript, je me dépatouille plus que je ne gère...

J'ai bien essayé de mettre dans le css un top négatif, la div cachée s'affiche à la bonne plasse mais le texte "en savoir plus" lui pour le coup se retrouve en bas ...

En jQuery :

$(document).ready(function() {
    $('#plus').click(function() {
        $('#footerplus').slideToggle();
        return false;
    });
});

<a id="plus" href="#">Un peu plus ?</a>
<div id="footerplus" style="display:none; border-top:solid 1px white; margin-left:10px; margin-right:145px;">
blablabla blabla blabla blabla blabla blalb alb alblalb alb azlb azl
</div>

Bonjour Desolation,

J'ai bien essayé ton code à savoir :

<script type="text/javascript">


$(document).ready(function() {
    $('#plus').click(function() {
        $('#footerplus').slideToggle();
        return false;
    });
});

</script>

suivi dans le html entre les balise footer de :

<footer> 
   <a id="plus" href="#">Un peu plus ?</a>
<div id="footerplus" style="display:none; border-top:solid 1px white; margin-left:10px; margin-right:145px;">
blablabla blabla blabla blabla blabla blalb alb alblalb alb azlb azl
</div></footer>

Mais il ne fonctionne pas!

Il faut inclure jQuery...

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>

.... Désolé de ne pas y avoir pensé....

L'effet avec ton code est parfait, comment puis-je lui indiqué de se dérouler vers le haut ? comme montré sur les images du débuts ? Si je mets un margin-top négatif dans le code, il s'affiche bien vers le haut cependant mon texte lui "en savoir un peu plus" reste toujours en bas. il ne remonte pas avec la div cachée...

Ce n'est pas prévu de base. Il faut coder cet effet, ceci devrait t'intéresser.