Afficher une <div> par défaut sur accrodéon jQuery

**bmael** · 07/07/2009, 17h52

Bonjour à tous !

J'ai réalisé un accordéon horizontal (ici).
Je voudrais pouvoir tomber directement sur une page de présentation (par exemple sur Accueil) déroulée.

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
15
16
17
18
19
20
21
22
23
24
25
26
27
// SeViR Simple Horizontal Accordion @2007
// http://letmehaveblog.blogspot.com
jQuery.fn.extend({
  haccordion: function(params){
    var jQ = jQuery;
    var params = jQ.extend({
      speed: 500,
      headerclass: "header",
      contentclass: "content",
      contentwidth: 550
    },params);
    return this.each(function(){
      jQ("."+params.headerclass,this).click(function(){
        var p = jQ(this).parent()[0];
        if (p.opened != "undefined"){
          jQ(p.opened).next("div."+params.contentclass).animate({
            width: "0px"
          },params.speed);
        }
        p.opened = this;
        jQ(this).next("div."+params.contentclass).animate({
          width: params.contentwidth + "px"
        }, params.speed);
      });
    });
  }
});

Quelqu'un semble dire qu'on peut le faire en ajoutant la ligne :

Code :

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

this.opened = jQ("."+params.contentclass,this).filter(".visible").prev();

Mais là, c'est au-delà de mes capacités.
Si quelqu'un trouve le temps de regarder, je lui serait très reconnaissant

**danielhagnoul** · 07/07/2009, 23h55

Bonsoir.

Avec cette version modifiée c'est le dernier onglet qui s'affiche (accueil) :

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
 
<!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" />
    <title>Page type</title>
    <style type="text/css">
        html {
            height: 100%;
        }
        body {
            margin: auto;
            padding: auto;
            height: 100%;
            background: #333333 url(fd-body2.png) center top repeat-y;
            color: #666666;
            text-align: center;
        }
        .haccordion {
            position: absolute;
            left: 50%;
            width: 900px;
            height: 100%;
            margin-top: 0;
            margin-left: -375px;
        }
        .haccordion .header, .haccordion .content{
            float: left;
            height: 100%;
        }
        .haccordion .header {
            width: 50px;
            background: url(fd-header.png) top left repeat-y;
            color: #fff;
            border-right: #FFF solid 2px;
            cursor: pointer;
        }
        .haccordion .webdesign {
            width: 50px;
            background: url(head-accueil3.png) top left no-repeat;
            color: #fff;
            border-right: #FFF solid 2px;
            cursor: pointer;
        }
        .haccordion .graphisme {
            width: 50px;
            background: #FFF;
            color: #fff;
            border-right: #FFF solid 2px;
            cursor: pointer;
        }
        .haccordion .contact {
            width: 50px;
            background: #FFF;
            color: #fff;
            border-right: #FFF solid 2px;
            cursor: pointer;
        }
        .haccordion .content {
            position: relativ;
            background: url(fd-content.png) bottom left repeat-x scroll;
            display: none;
            color: #000;
            width: 0px;
            overflow: auto;
        }
        .haccordion .content p{
            margin: 5px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        (function($){
            $.fn.haccordion = function(params){                
                var params = $.extend({
                    speed: 500,
                    headerclass: "header",
                    contentclass: "content",
                    contentwidth: 550
                },params);
 
                return this.each(function(){
                    $("." + params.contentclass + ":last",this).animate({
                        width: params.contentwidth + "px"
                    }, params.speed);
 
                    $("."+params.headerclass,this).click(function(){
                        var p = $(this).parent()[0];
 
                        if (p.opened != "undefined"){
 
                            $(p.opened).next("div."+params.contentclass).animate({
                                width: "0px"
                            },params.speed);
                        }
 
                        p.opened = this;
 
                        $(this).next("div."+params.contentclass).animate({
                            width: params.contentwidth + "px"
                        }, params.speed);
 
                    });
                });
            };
        })(jQuery);
 
        $(document).ready(function(){
            $(".haccordion").haccordion();
        });
    </script>
</head>
<body>
        <div class="haccordion">
            <div class="header">
                <img style="padding-top: 10px;" src="head-contact3.png" alt="contact" />
            </div>
            <div class="content">
                <p>
                    This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
            <div class="header">
                <img style="padding-top: 10px;" src="head-graphisme3.png" alt="contact" />
            </div>
            <div class="content">
                <p>
                    This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
            <div class="header">
                <img style="padding-top: 10px;" src="head-webdesign3.png" alt="contact" />
            </div>
            <div class="content">
                <p>
                    This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
            <div class="header">
                <img style="padding-top: 10px;" src="head-accueil3.png" alt="contact" />
            </div>
            <div class="content">
                <p align="center">
                    <img src="bulle-eikona.png" alt="bulee-eikona" />
                </p>    <!-- ce tag p était absent ! -->
                <p>
                    This is a sample of content for Content4 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
        </div>
</body>
</html>

**bmael** · 08/07/2009, 14h09

L'effet est intéressant mais ce n'est pas du tout ce que je recherche

L'accordéon fait un aller-retour avant de se fixer. De plus, la page "accueil" reste ouverte au-dessous donc apparition d'un ascenseur à droite...
Voir ici.
J'ai essayé de mettre directement le code que tu m'as donné (en rétablissant les liens et ça ne marche pas.

**danielhagnoul** · 09/07/2009, 08h59

Bonjour, j'ai mal placé mon ajout il doit être avant la boucle return this.each()

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
 
        (function($){
            $.fn.haccordion = function(params){                
                var params = $.extend({
                    speed: 500,
                    headerclass: "header",
                    contentclass: "content",
                    contentwidth: 550
                },params);
 
                $("." + params.contentclass + ":last",this).animate({width: params.contentwidth}, params.speed);
 
                return this.each(function(){
                    $("."+params.headerclass,this).click(function(){
                        var p = $(this).parent()[0];
 
                        if (p.opened != "undefined"){
                            $(p.opened).next("div."+params.contentclass).animate({width:0},params.speed);
                        }
 
                        p.opened = this;
 
                        $(this).next("div."+params.contentclass).animate({width: params.contentwidth}, params.speed);
 
                    });
                });
            };
        })(jQuery);

Pour le reste, ...

**bmael** · 09/07/2009, 11h31

Impec !

Sauf que la page accueil reste ouverte et passe au-dessous...

**danielhagnoul** · 10/07/2009, 11h17

Bonjour, voici le mieux que je peux faire, ce n'est pas parfait.
Modifications dans le plugin et dans les CSS :

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
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
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
 
<!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" />
    <title>Page type</title>
    <style type="text/css">
        body {
            margin: 0px;
            padding: 0px;
            height: 100%;
            background: #333333 url(fd-body2.png) center repeat-y;
            color: #666666;
            text-align: center;
        }
        .haccordion {
            position: absolute;
            top:0px;
            left: 50%;
            width:auto;
            height: 100%;
            margin-top: 0px;
            margin-left: -375px;
        }
        .haccordion .header, .haccordion .content{
            float: left;
            height: 100%;
        }
        .haccordion .header {
            width: 50px;
            background: url(fd-header.png) top repeat-y;
            color: #fff;
            border-right: #FFF solid 2px;
            cursor: pointer;
        }
        .haccordion .content {
            background: url(fd-content.png) bottom repeat-x scroll;
            display: none;
            color: #000000;
            width: 0px;
            overflow:hidden;
        }
        .haccordion .content p {
            margin: 5px;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        (function($){
            $.fn.haccordion = function(params){
                var opts = $.extend({}, {speed: 800,headerclass: "header",contentclass: "content",contentwidth: 550}, params);        
 
                var obj = $("." + opts.contentclass + ":last",this).css({
                    width: opts.contentwidth,
                    display: "block"
                });
 
                return this.each(function(){
                    $("."+opts.headerclass,this).click(function(){
 
                        $(obj).animate({
                            width: 0
                        },opts.speed);
 
                        obj = $(this).next("div."+opts.contentclass);
 
                        $(obj).animate({
                            width: opts.contentwidth
                        }, opts.speed);
 
                    });
                });
            };
        })(jQuery);
 
        $(document).ready(function(){
            $(".haccordion").haccordion();
        });
    </script>
</head>
<body>
        <div class="haccordion">
            <div class="header">
                <img style="padding-top: 10px;" src="head-contact3.png" alt="contact" />
            </div>
            <div class="content">
                <p>
                    This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
            <div class="header">
                <img style="padding-top: 10px;" src="head-graphisme3.png" alt="contact" />
            </div>
            <div class="content">
                <p>
                    This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
            <div class="header">
                <img style="padding-top: 10px;" src="head-webdesign3.png" alt="contact" />
            </div>
            <div class="content">
                <p>
                    This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
            <div class="header">
                <img style="padding-top: 10px;" src="head-accueil3.png" alt="contact" />
            </div>
            <div class="content">
                <p align="center">
                    <img src="bulle-eikona.png" alt="bulee-eikona" />
                </p>    <!-- ce tag p était absant ! -->
                <p>
                    This is a sample of content for Content4 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing
                </p>
            </div>
        </div>
</body>
</html>

Afficher une <div> par défaut sur accrodéon jQuery

jQuery

Vue hybride

Discussions similaires

Partager

Partager