afficher/cacher en jquery

**stomerfull** · 01/10/2009, 09h48

Bonjour je voudrais reecrire ce code qui marche tres bien en javascript simple en utilisant jQuery

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function afficher_cacher(id)
{
        if(document.getElementById(id).style.visibility=="hidden")
        {
                document.getElementById(id).style.visibility="visible";
                document.getElementById('bouton_'+id).innerHTML='-';
        }
        else
        {
                document.getElementById(id).style.visibility="hidden";
                document.getElementById('bouton_'+id).innerHTML='+';
        }
        return true;
}

jai fait comme ça mais ça marche pas

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

	
	Code  :
	Sélectionner tout -
	Visualiser dans une fenêtre à part
	123456789101112131415 function afficher_cacher(id)
{
id='#'id;        
if($(id).css({visibility:"hidden"})
        {
                $(id).css({'visibility':'visible'});
                document.getElementById('bouton').innerHTML='-';
        }
        else
        {
                $(id).css({'visibility':'hidden'});
                document.getElementById('bouton_'+id).innerHTML='+';
        }
        return true;
}

le petit signe + et - c'est quand je clique sur + c'est pour affiche et - c'est cacher
merci pour votre conseil

**danielhagnoul** · 01/10/2009, 11h18

Bonjour.

Exemple avec toggle() :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
<!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="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#FFFFFF;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
 
        /* TEST */
        .maDivClass {
            width:200px;
            height:200px;
            background-color:#0066FF;
            border:1px solid #999999;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
 
        function afficher_cacher(id){
            $("#"+id).toggle(2000, function(){
                alert("Bonjour");
            });
        }
 
        $(document).ready(function(){
 
            $("#monBtnID").click(function(){
                afficher_cacher("madivID");
            });
 
        });        
    </script>
</head>
<body>
    <button id="monBtnID" type="button">Afficher/cacher</button>
    <div id="madivID" class="maDivClass"></div>
</body>
</html>

**avion-f16** · 01/10/2009, 19h27

Tu peux aussi utiliser le filtre is(':visible') :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function afficher_cacher(id) {
    if($(id).is(':visible')) {
        $(id).hide();
    } else {
        $(id).show();
    }
}

Quand tu appelles ta fonction, n'oublie pas le # : afficher_cacher("#" + variableId);

**Bovino** · 01/10/2009, 20h07

Envoyé par avion-f16

Tu peux aussi utiliser le filtre is(':visible') :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
function afficher_cacher(id) {
    if($(id).is(':visible')) {
        $(id).hide();
    } else {
        $(id).show();
    }
}

Quand tu appelles ta fonction, n'oublie pas le # : afficher_cacher("#" + variableId);

Attention, la méthode pour déterminer si un élément est :visible ou non a changé depuis jQuery 1.3.2
Désormais, l'affectation de ce filtre se base sur la dimension affichée de l'élément, ce qui implique qu'un élément en visibility:hidden ne sera pas répertorié. En revanche, il répondra au filtre :hidden.
Voir à ce sujet : http://docs.jquery.com/Release:jQuer...den_Overhauled

afficher/cacher en jquery

jQuery

Discussions similaires

Partager

Partager