Personnalisation H3 accordeon jquery

**technik** · 20/10/2010, 11h21

Bonjour,

J'utilise un script Jquery de type accordeon voici le code.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function() {
        $('div.accordeon> div').hide(); 
        $('div.accordeon> h3').click(function() {
          var $nextDiv = $(this).next();
          var $visibleSiblings = $nextDiv.siblings('div:visible');
          if ($visibleSiblings.length ) {
            $visibleSiblings.slideUp('fast', function() {
              $nextDiv.slideToggle('fast');
            });
          } else {
             $nextDiv.slideToggle('fast');
          }
        });
      });

Je souhaite pour personnaliser en css ma balise h3 lorsqu'elle est cliqué (et actif) comment puis je faire ?

Merci d'avance.

**Watilin** · 20/10/2010, 17h57

Bonsoir,
peux-tu préciser un peu ta question ? Veux-tu modifier l'apparence de ton <h3> pour tous les cas, ou seulement quand l'accordéon est déroulé ?

S'il s'agit de la première solution, essaye simplement ceci :

Code CSS :

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

1
2
3
div.accordeon h3 {
  /* ton code CSS ici */
}

**technik** · 20/10/2010, 21h49

C'est effectivement uniquement quand l'accordéon est déroulé que je souhaiterais personnaliser en css la balise h3.

**Watilin** · 21/10/2010, 10h17

Alors là c'est un peu plus compliqué car il va falloir bricoler un toggle pour ton <h3>.

http://api.jquery.com/toggle-event/

Ça fonctionne avec deux fonctions.

Code JS :

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

.toggle(fonction1, fonction2)

la fonction 1 est appelée au premier clic et la fonction 2 au second.

J'ai eu le temps d'y réfléchir hier soir ; il faut que tu conserves quelque part l'ancien style du <h3> pour le rétablir quand l'accordéon se replie. Et comme tu peux avoir plusieurs accordéons, tu ne peux pas faire ça avec une simple variable… La solution c'est de l'attacher directement au <h3>, en utilisant .data() (http://api.jquery.com/data/).

Ensuite, il faut adapter ton code en remplaçant les sildeToggle par des sildeDown et slideUp. Si on imbrique les toggle, ça va faire des trucs bizarres. On mettra slideDown dans la fonction 1 et slideUp dans la fonction 2.

Voici un exemple complet :

Code HTML :

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
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<title>Toggle avec style !</title>
<style>
 
body {
    font-size: small;
    font-family: sans-serif;
    margin: 0;
    padding: 0;
}
 
div.accordeon {
    width: 20em;
    border: solid thin white;
    margin: 1.5em;
    padding: 1em;
    
    /* styles "whoaaaa" */
    -moz-border-radius: 1ex;
    -moz-box-shadow: gray 2px 4px 8px 0;
    background: -moz-linear-gradient(white, #eee);
}
 
div.accordeon h3 {
    cursor: pointer;
    margin: 0;
}
 
div.accordeon div {
    text-align: justify;
    margin-top: 1em;
}
</style>
<script src="jquery-1.4.3.min.js"></script>
<script>
 
$(document).ready(function() {
    $('div.accordeon > div').hide();
    var h3Style = {
        'font-family': 'serif',
        'color': 'red',
        'font-style': 'italic'
    };
    $('div.accordeon > h3').toggle(function() {
        var $this = $(this);
        if (!$this.data('oldStyle')) {
            $this.data('oldStyle', {
                'font-family': $this.css('font-family'),
                'color': $this.css('color'),
                'font-style': $this.css('font-style')
            });
        };
        $this.css(h3Style);
        var $nextDiv = $this.next();
        var $visibleSiblings = $nextDiv.siblings('div:visible');
        if ($visibleSiblings.length) {
            $visibleSiblings.slideUp('fast', function() {
                $nextDiv.slideDown('fast');
            });
        } else {
            $nextDiv.slideDown('fast');
        };
    },
    function() {
        var $this = $(this);
        $this.css($this.data('oldStyle'));
        var $nextDiv = $this.next();
        var $visibleSiblings = $nextDiv.siblings('div:visible');
        if ($visibleSiblings.length) {
            $visibleSiblings.slideUp('fast', function() {
                $nextDiv.slideUp('fast');
            });
        } else {
            $nextDiv.slideUp('fast');
        };
    });
});
 
</script>
</head>
<body>
 
<div class="accordeon">
<h3>Lorem</h3>
<div>Montius nos tumore inusitato quodam et novo ut rebellis et
maiestati recalcitrantes Augustae per haec quae strepit incusat iratus
nimirum quod contumacem praefectum, quid rerum ordo postulat ignorare
dissimulantem formidine tenus iusserim custodiri.</diV>
</div><!-- accordeon -->
 
</body>
</html>