Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Acordeon expandido al iniciar

JavaScript - Acordeon expandido al iniciar

Volver
Nuevo Tema
<<>>
 
Vista:

Acordeon expandido al iniciar

Publicado por Rodrigo (1 intervención) el 14/12/2012 15:12:09
Buenos Dias, como estan? Soy nuevo en el Foro y en mi primer post les voy a pedir ayuda sobre lo sigueinte:

Estoy realizando una pagina la cual posee un bello acordeon. El problema esta en lo siguiente, yo tengo el codigo realizado para que cuando se pase el mouse sobre algun elemento del acordeon, el mismo se expanda y muestre una descripcion.

El dueño de la pagina me pidio que Al Cargar la pagina, ya se encuentre expandido el primer elemento...

Repasando:

Hoy en día Abro la pagina y el acordeón se encuentra cerrado... [

La idea del cliente: Abro la pagina y debe encontrarse ya expandido el primer elemento del acordeon. Y cuando le mouse no esta situado en ningun elemento del acordeon, tambien debe estar expandido el primero:

Podrian dame auna mano con esto???


A continuacion los codigos:

CSS

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
#acordeon{

	position: relative;
	width: 100%;
	float: right;
}
 
ul.accordion{
    list-style:none;
    position:relative;
	top: 20px;
	right: 40px;
    font-family: Cambria, serif;
    font-size: 16px;
    font-style: italic;
    line-height: 1.5em;
 
}
ul.accordion li{
    float:right;
    width:115px;
    height:500px;
    display:block;
    border-right:2px solid #224400;

    border-bottom:2px solid #224400;

    background-color:#fff;

    background-repeat:no-repeat;
    background-position:center center;
    position:relative;
    overflow:hidden;
    cursor:pointer;
    -moz-box-shadow:1px 3px 15px #555;

    -webkit-box-shadow:1px 3px 15px #555;

    box-shadow:1px 3px 15px #555;

}
ul.accordion li.bg1{
    background-image:url(../img/consul.jpg);
}
ul.accordion li.bg2{
    background-image:url(../img/servidor.jpg);
}
ul.accordion li.bg3{
    background-image:url(../img/backup.jpg);
}
ul.accordion li.bg4{
    background-image:url(../img/storage.jpg);
}
ul.accordion li.bg5{
    background-image:url(../img/office365.jpg);
}
ul.accordion li.bleft{
    border-left:2px solid #fff;

}
ul.accordion li .heading{
    background-color:#fff;

    padding:10px;
    margin-top:60px;
    opacity:0.9;
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:0px;
    font-size:13px;
    color:#224400;

    text-align:center;
    text-shadow:-1px -1px 1px #ccc;

}
ul.accordion li .description{
    position:absolute;
    width:100%;
    height:180px;
    bottom:0px;
    left:0px;
    display:none;
}
ul.accordion li .description h2{
    text-transform:uppercase;
    font-style:normal;
    font-weight:bold;
    letter-spacing:1px;
    font-size:38px;
    color:#224400;

    text-align:left;
    margin:0px 0px 15px 20px;
    text-shadow:-1px -1px 1px #ccc;

}
ul.accordion li .description p{
    line-height:14px;
    margin:10px 22px;
    font-family: "Trebuchet MS", sans-serif;
    font-size: 12px;
    font-style: italic;
    font-weight: normal;
    text-transform: none;
    letter-spacing: normal;
    line-height: 1.6em;
	color: #224400;

}
ul.accordion li .description a{
    position:absolute;
    bottom:5px;
    left:20px;
    text-transform:uppercase;
    font-style:normal;
    font-size:11px;
    text-decoration:none;
    color:#224400;

}
ul.accordion li .description a:hover{
    color:#224400;

    text-decoration:underline;
}
 
ul.accordion li .bgDescription{
    background:transparent url(../images/bgDescription.png) repeat-x top left;
    height:340px;
    position:absolute;
    bottom:0px;
    left:0px;
    width:100%;
    display:none;
}


Funciones JavaScript

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':'390px'},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':'85px'},600);
                        $('.heading',$this).stop(true,true).fadeIn();
                        $('.description',$this).stop(true,true).fadeOut(500);
                        $('.bgDescription',$this).stop(true,true).slideUp(700);
                    }
                );
            });
</script>


HTML del acordeon:

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
<div id='acordeon'>
				<ul class="accordion" id="accordion">
				<li class="bg1">
                    <div class="heading">Consul toria</div>
                    <div class="bgDescription"></div>
                    <div class="description">
 
                        <a href="consultoria.php"><h2>Consultoria</h2>
                        <p><?php include("inc/consulini.php"); ?></p></a>
 
                    </div>
                </li>
                <li class="bg2">
                    <div class="heading">Servidor Web</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <a href="servidor.php"><h2>Servidor Web</h2>
                        <p><?php include("inc/servidorini.php"); ?></p></a>
                    </div>
 
                </li>
                <li class="bg3">
                    <div class="heading">Back Up Web</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <a href="producto.php?mensaje=1"><h2>Back Up Web</h2>
                        <p><?php include("inc/backini.php"); ?> </p></a>
                    </div>
 
                </li>
                <li class="bg4 bleft">
                    <div class="heading">Sky Drive</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <a href="producto.php?mensaje=2"><h2>Sky Drive</h2>
                        <p><?php include("inc/storageini.php"); ?></p></a>
                    </div>
 
                </li>
				<li class="bg5 bleft">
                    <div class="heading">Office 365</div>
                    <div class="bgDescription"></div>
                    <div class="description">
                        <a href="producto.php?mensaje=3"><h2>Office 365</h2>
                        <p><?php include("inc/officeini.php"); ?></p></a>
                    </div>
				</li>
				</ul>
</div>


Muchas Garcias..

Saludos.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder

Acordeon expandido al iniciar

Publicado por m.p. (1 intervención) el 04/02/2013 10:28:47
Hola Rodrigo,

No te puedo ayudar sobre tu consulta. En mi caso, he introducido un efecto acordeón en el sidebar y luego incorporé otro efecto (carrusel) en el header, se me ha anulado el efecto acordeón, aunque sí que me funciona el otro.

como lo podria corregir para que me funcionen los dos.

Agradeceria las respuestas....

Atte.

mp.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar