accordion reste fermé

**sinifer** · 17/05/2013, 17h30

Bonjour,

je suis pas très fort pour pas dire nul en js.

j'ai récupérer un code sur ce site
http://tympanus.net/Tutorials/ElegantAccordion/

et sa marche par contre moi je voudrais que Meiklejohn soit ouvert par défaut contrairement à l’exemple ou ils sont tous fermée

Voici le JS:

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
 <!-- The JavaScript -->
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script type="text/javascript">
            $(function() {
                $('#accordion > li').hover(
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'480px'},500);
                        $('.heading',$this).stop(true,true).fadeOut();
                        $('.bgDescription',$this).stop(true,true).slideDown(500);
                        $('.description',$this).stop(true,true).fadeIn();
                    },
                    function () {
                        var $this = $(this);
                        $this.stop().animate({'width':'115px'},1000);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                )
            });
        </script>

Merci d'éclairer ma lanterne car la j'ai plus de lumière

Merci

**royto** · 17/05/2013, 18h06

Quel est le comportement souhaité ?

- Tous ouvert par défaut ? Le premier ouvert par défaut ?
- Ouverture/Fermeture au survol, sur clic ?

**sinifer** · 21/05/2013, 09h03

Bonjour royto,

Je souhaite que le premier soit ouvert par défault.

J'ai essayer par moi même mais je dispose de trop faible connaissance malheureusement. Ton aide me sera très précieuse.

Merci d'avance

**sinifer** · 23/05/2013, 08h56

Bonjour,

es-ce que quelqu'un aurait une piste pour moi svp?
car là je galère un peu

Merci de votre aide

**SpaceFrog** · 23/05/2013, 12h51

on peut voir ton html ?

**sinifer** · 23/05/2013, 13h08

Oui bien sur, c'est vraiment comme dans le site pour l'instant.

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
 
	<ul class="accordion" id="accordion">
 
		<li class="bg1"> 
		<div class="heading">Guler</div>
		<div class="bgDescription"></div>
		<div class="description"> 
		<h2>Guler</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
			veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
			ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
			velit esse cillum dolore eu fugiat nulla pariatur.</p>
			<a href="#">more &rarr;</a> </div>
		</li>
 
		<li class="bg2"> 
			<div class="heading">Phillips</div>
			<div class="bgDescription"></div>
			<div class="description"> 
			<h2>Phillips</h2>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
			doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
			veritatis et quasi architecto beatae vitae dicta sunt explicabo. </p>
			<a href="#">more &rarr;</a> </div>
		</li>
 
		<li class="bg3"> 
			<div class="heading">Diamanti</div>
			<div class="bgDescription"></div>
			<div class="description"> 
			<h2>Diamanti</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
			tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim 
			veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex 
			ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate 
			velit esse cillum dolore eu fugiat nulla pariatur.</p>
			<a href="#">more &rarr;</a> </div>
		</li>
 
		<li class="bg4 bleft"> 
			<div class="heading">Meiklejohn</div>
			<div class="bgDescription"></div>
			<div class="description"> 
			<h2>Meiklejohn</h2>
			<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
			doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore 
			veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo 
			enim ipsam volupta quia voluptas sit aspernatur aut odit aut fugit, 
			sed quia consequuntur magni dolores eos qui ratione voluptatem sequi 
			nesciunt.</p>
			<a href="#">more &rarr;</a> </div>
		</li>
	</ul>

Et voici mon css si jamais :

Code css :

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
 
 
/*-------------------------------------------*
/* accordion
/*-------------------------------------------*/
 
#accordion {
    height: 350px;
    margin-bottom: 40px;
    position: relative;
    right: 196px;
    width: 1051px;
}
ul.accordion {
    font-family: Cambria,serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
    list-style: none outside none;
    position: absolute;
    top: 0;
}
ul.accordion li {
    background-color: #FFFFFF;
    background-position: center center;
    background-repeat: no-repeat;
    border-bottom: 2px solid #FFFFFF;
    border-right: 2px solid #FFFFFF;
    box-shadow: 1px 3px 15px #555555;
    cursor: pointer;
    display: block;
    float: right;
    height: 375px;
    overflow: hidden;
    position: relative;
    width: 115px;
}
 
ul.accordion li.bg1 {
    background-image: url("http://127.0.0.1/modules/drupal715x13043/sites/all/themes/business/images/ar3.jpg");
}
ul.accordion li.bg2 {
    background-image: url("http://127.0.0.1/modules/drupal715x13043/sites/all/themes/business/images/ar4.jpg");
}
ul.accordion li.bg3 {
    background-image: url("http://127.0.0.1/modules/drupal715x13043/sites/all/themes/business/images/ar2.jpg");
}
ul.accordion li.bg4 {
    background-image: url("http://127.0.0.1/modules/drupal715x13043/sites/all/themes/business/images/ar1.jpg");
}
ul.accordion li.bleft {
    border-left: 2px solid #FFFFFF;
}
ul.accordion li .heading {
    background-color: #FFFFFF;
    color: #444444;
    font-size: 14px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    margin-top: 60px;
    opacity: 0.9;
    padding: 10px;
    text-align: center;
    text-shadow: -1px -1px 1px #CCCCCC;
    text-transform: uppercase;
}
ul.accordion li .description {
    bottom: 0;
    display: none;
    height: 204px;
    left: 0;
    position: absolute;
    width: 480px;
}
ul.accordion li .description h2 {
    color: #444444;
    font-size: 45px;
    font-style: normal;
    font-weight: bold;
    letter-spacing: 1px;
    margin: 0 0 15px 20px;
    text-align: left;
    text-shadow: -1px -1px 1px #CCCCCC;
    text-transform: uppercase;
}
ul.accordion li .description p {
    font-family: "Trebuchet MS",sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    letter-spacing: normal;
    line-height: 1.6em;
    margin: 10px 22px;
    text-transform: none;
}
ul.accordion li .description a {
    bottom: 5px;
    color: #888888;
    font-size: 11px;
    font-style: normal;
    left: 20px;
    position: absolute;
    text-decoration: none;
    text-transform: uppercase;
}
ul.accordion li .description a:hover {
    color: #333333;
    text-decoration: underline;
}
ul.accordion li .bgDescription {
    background: url("http://127.0.0.1/modules/drupal715x13043/sites/all/themes/business/images/bgDescription.png") repeat-x scroll left top transparent;
    bottom: 0;
    display: none;
    height: 340px;
    left: 0;
    position: absolute;
    width: 100%;
}

Voila, j'espère que ça peut vous aider.

Merci.

**SpaceFrog** · 23/05/2013, 13h18

ben mets un css au demarrage

Code :

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

.bg4 { width: 115px;}

**sinifer** · 23/05/2013, 14h17

Merci mais j'ai pas très bien compris

comment je le mets au démarrage?

**SpaceFrog** · 23/05/2013, 14h34

en allant lire les tutos sur le css ?

**sinifer** · 23/05/2013, 15h10

Merci,

enfètte le problème c'est pas le css mais c'est le js car ce que je veux c'est quand j'ouvre ma page, c'est comme si javais la souris sur bg4 et si je me trompe pas c'est avec le js qu'on peux l’ouvrir non?

**SpaceFrog** · 23/05/2013, 15h33

en fait le problème c'est que tu n'ecoutes pas ce que l'on te dit ...

le problème n'est pas forcément en js ...
tu peux mettre un css au démarrage au div que tu veux ouvirir ...

**sinifer** · 28/05/2013, 09h28

Merci SpaceFrog,

en fait c'est que j'étais buté sur le JS et étais sur que c'était là que ça ce passait.

Merci c'est ok.

accordion reste fermé

jQuery

Discussions similaires

Partager

Partager