Acordeon Expandido al iniciar la pagina 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, lo que logre hacer, El tema es que no puedo hacer qeu al pasar el mouse por otros, este se cierre y se habra el que corresponde...
Repasando:
Hoy en día Abro la pagina y el acordeón se encuentra el primer elemento expandido (COSA CORRECTA) y al pasar el mouse sobre los otros, estos se expanden pero no se cierra el primero...
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. Pero cuando paso el mouse sobre otros, debe cerrarse el primero
Podrian dame auna mano con esto???
A continuacion los codigos:
CSS
#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
<!-- The JavaScript -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var $this= $('#bg5');
$this.stop().animate({'width':'450px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDow n(500);
$('.description',$this).stop(true,true).fadeIn();
$('#accordion li').hover(
function () {
var $this = $(this);
$this.stop().animate({'width':'450px'},500);
$('.heading',$this).stop(true,true).fadeOut();
$('.bgDescription',$this).stop(true,true).slideDow n(500);
$('.description',$this).stop(true,true).fadeIn();
},
function () {
var $this = $(this);
$this.stop().animate({'width':'115px'},600);
$('.heading',$this).stop(true,true).fadeIn();
$('.description',$this).stop(true,true).fadeOut(50 0);
$('.bgDescription',$this).stop(true,true).slideUp( 700);
}
);
});
</script>
HTML del acordeon:
<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.
