Bizarre cet effet [Résolu]

[yann18]

Bonjour,

Je cherche à réaliser une interaction simple:
Deux div sont initialement cachés par java-script (et non pas par css). L'utilisateur peut cliquer sur chacun des liens et faire apparaître/ disparaître respectivement les div. Seulement, lorsque les div apparaissent, il y a un décalage qui s'opère (le contenu remonte) Pourquoi ? le code:

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<ul>
            <li><a href="#">Par nom</a></li>
            <li><a href="#">Dans une section</a></li>
        </ul>
        <div id="searchByName">
            <h1>Recherche par nom</h1>
        </div>
        <div id="searchBySection">
            <h1>Recherche par section</h1>
        </div>
        <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(function(){
                //On cache par défaut les calques
                $('#searchByName').hide();
                $('#searchBySection').hide();
                //Affichage des div si clic user
                $('li a:contains(Par nom)').click(function(){
                    $('#searchByName').slideToggle();
                });
                $('li a:contains(section)').click(function(){
                    $('#searchBySection').slideToggle();
                });
            });
        </script>

Merci,

[Oragon Efreet]

Je vais avoir du mal à te dire pour quoi mais c'est en rapport avec les mages et la nature 'block' des éléments que tu fais apparaître apparement.

Sans considérer cela comme la solution ultime, je suis parvenu à retirer ce saut en ajoutant des balides "<br />" avant tes deux "<div>" :

Code html :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<ul>
            <li><a href="#">Par nom</a></li>
            <li><a href="#">Dans une section</a></li>
        </ul>
        <br />
        <div id="searchByName">
            <h1>Recherche par nom</h1>
        </div>
        <br />
        <div id="searchBySection">
            <h1>Recherche par section</h1>
        </div>
        <script type="text/javascript" src="jquery.js"></script>
        <script type="text/javascript">
            $(function(){
                //On cache par défaut les calques
                $('#searchByName').hide();
                $('#searchBySection').hide();
                //Affichage des div si clic user
                $('li a:contains(Par nom)').click(function(){
                    $('#searchByName').slideToggle();
                });
                $('li a:contains(section)').click(function(){
                    $('#searchBySection').slideToggle();
                });
            });
        </script>

En espérant avoir été utile

[yann18]

Il pourrait y avoir un rapport effectivement... En tout cas, ces rustines fonctionnent... Merci bien à toi.