[SOLUCIONADO] Desplegable de acordeón

JUMASOL · #1 (**permalink**) 24/12/2014, 05:47

Hola.

He encontrado este sencillo desplegable:

http://www.dezinerfolio.com/wp-conte...ordemo/01.html

Me gustaría saber si hay forma de hacer que el primer elemento no se despliegue al acceder al sitio.

La idea es crear un acordeón de contenido mediante css3, pero no funciona en Internet Explorer 8 y versiones anteriores, así que se me ha ocurrido añadir javascript para estos casos.

¿Me podéis ayudar o indicar algo?

Gracias.

America|UNK · #2 (**permalink**) 24/12/2014, 10:40

La solución está en tu propio script del accordion, coloca el código, debe haber un método para evitar se despliegue el primer contenido

JUMASOL · #3 (**permalink**) 24/12/2014, 13:25

El hmtl es como sigue:

Código:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0064)http://www.dezinerfolio.com/wp-content/uploads/accordemo/01.html -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Simple Javascript Accordions - by www.dezinerfolio.com</title>
<style type="text/css">
* {
	margin:0;
	padding:0;
	list-style:none;
}
body {
	font-family: Arial, Helvetica, sans-serif;
	font-size: 11px;
	margin:10px;
}

#basic-accordian{
	border:5px solid #EEE;
	padding:5px;
	width:350px;
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-175px;
	z-index:2;
	margin-top:-100px;
}

.accordion_headings{
	padding:5px;
	background:#99CC00;
	color:#FFFFFF;
	border:1px solid #FFF;
	cursor:pointer;
	font-weight:bold;
}

.accordion_headings:hover{
	background:#00CCFF;
}

.accordion_child{
	padding:15px;
	background:#EEE;
}

.header_highlight{
	background:#00CCFF;
}

</style>
<script type="text/javascript" src="./Simple Javascript Accordions - by www.dezinerfolio.com_files/accordian.pack.js"></script>
</head>
<body onload="new Accordian('basic-accordian',5,'header_highlight');">


<div id="basic-accordian"><!--Parent of the Accordion-->

<div align="center">Simple Accordions</div>

<!--Start of each accordion item-->
  <div id="test-header" class="accordion_headings">Home</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test-content" style="display: none; overflow: hidden; height: 0px; opacity: 0;"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br><br> Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
    </div>
    
  </div>
<!--End of each accordion item--> 


<!--Start of each accordion item-->
  <div id="test1-header" class="accordion_headings header_highlight">About Us</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test1-content" style="display: block; overflow: hidden; height: 72px; opacity: 1;"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.
    </div>
    
  </div>
<!--End of each accordion item--> 



<!--Start of each accordion item-->
  <div id="test2-header" class="accordion_headings">Downloads</div><!--Heading of the accordion ( clicked to show n hide ) -->
  
  <!--Prefix of heading (the DIV above this) and content (the DIV below this) to be same... eg. foo-header & foo-content-->
  
  <div id="test2-content" style="display: none; overflow: hidden;"><!--DIV which show/hide on click of header-->
  
  	<!--This DIV is for inline styling like padding...-->
    <div class="accordion_child">
    	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nunc ligula nisl, egestas non, pharetra vel, scelerisque accumsan, lacus. Proin nibh. Aenean dapibus. Quisque facilisis, ligula ut blandit hendrerit, purus neque rhoncus ipsum, sit amet ultrices mauris augue non arcu. Donec et sem nec libero viverra accumsan.<br>
    </div>
    
  </div>
<!--End of each accordion item--> 





<a href="http://www.dezinerfolio.com/wp-content/uploads/accordemo/05.html" style="float:left">Previous Demo</a>
<a href="http://www.dezinerfolio.com/wp-content/uploads/accordemo/02.html" style="float:right;">Next Demo</a>

</div><!--End of accordion parent-->







</body></html>

Y el javascript:

Código:

//by dezinerfolio.com
eval((function(){a=" {3document5ByIdOgvv=8E!&&E!K32}o=E;E;v=parseInt(2E=o;3vdheight=vHpx}Oofvgvv=v/d.h;dDv;dfilterKalpha(D+v*100H)Obz>0z#-1:z-v90E;%eE;z<x(x-z)#+1:v+z9x%Accordians,fl=5sByTagName(diva=[]d=S;QQ,Q)=={a.push}}xL((hc=h0,hc6==hcMc+;c;coverflowKhidden;c.h=g(cc.s=(s=8)?7:s;h.f=f;h.c=a;h.match4fHH))x=h}hC=(Rj=0;j<F.c;j++n=F.c[j];n=n0,ndMn6nMn+;s=dJt4sH)Rp=0;p<s;p++s[p]=KGsJce(p,1d=s.join( break}}clearn.tQ==FPg(n,0@ed+K GP@b}}}}})(S)}x!LxC()}}",b=49;while(b>=0)a=a.replace(new RegExp("#%2345689@CDEFGHJKLMOPQRS".charAt(b),"g"),("\\\042\044.style.displayfunctionInterval(.className.length.indexOf(-)(d)if(-content).id){.style.=none{d=;z=g;x=d.h;(d,;for(i=0;i<l;i++);}else{('+n+')',9)}.substr(=blockv=Math.round(/d.sv=(v<1)?zcleard.t)}} d.offsetHeightreturn (new RegExp(.getElement+-header=undefined;ofv)gn.t=set'.onclickopacity=dthis+d.f+.spli==null=(} n=dfor(l[i]".split(""))[b--]);return a})())

America|UNK · #4 (**permalink**) 24/12/2014, 16:59

Cambia

Código Javascript:

Ver original<body onload="new Accordian('basic-accordian',5,'header_highlight');">

por esto:

Código Javascript:

Ver original<body onload="new Accordian('basic-accordian',5,'header_highlight');(function(h,c){h.classList.remove('header_highlight');c.style.height=0;c.style.display='none'})(document.getElementById('test-header'),document.getElementById('test-content'))">

JUMASOL · #5 (**permalink**) 25/12/2014, 03:00

No funciona, sigue abriéndose la primera pestaña.

America|UNK · #6 (**permalink**) 27/12/2014, 08:16

Prueba ingresar este código en consola cuando cargue la página?

Código Javascript:

Ver originalsetTimeout(function(){(function(h,c){h.classList.remove('header_highlight');c.style.height=0;c.style.display='none'})(document.getElementById('test-header'),document.getElementById('test-content'))},1)

ArturoGallegos · #7 (**permalink**) 28/12/2014, 02:10

Para que usar una librería jQuery que pesa tanto para algo tan simple que se solventa con unas cuantas lineas?

Usa esto, te sera mas fácil y hace lo que buscas.
http://jsfiddle.net/arturogallegos/p3t7xcpb/

Si son elementos independientes quizás te interese mas usar la función toggle de jquery
quedando todo aun mas simple.

JUMASOL · #8 (**permalink**) 28/12/2014, 15:42

Cita:

Iniciado por America|UNK

Prueba ingresar este código en consola cuando cargue la página?

Código Javascript:

Ver originalsetTimeout(function(){(function(h,c){h.classList.remove('header_highlight');c.style.height=0;c.style.display='none'})(document.getElementById('test-header'),document.getElementById('test-content'))},1)

Esto no lo entiendo. ¿Dónde meto esto? ¿En el html?

America|UNK · #9 (**permalink**) 28/12/2014, 16:44

Te recomiendo usar el código que te puso ArturoGallegos, ya que la función Accordion de tu página es muy compleja y usa temporizadores que no son necesarios para un acordeón. Más que un consejo, de cualquier forma así no lo quieras, en tu página te recomiendo usar jQuery. Y hay muchos Accordeons simples en jQuery a tu gusto.

JUMASOL · #10 (**permalink**) 28/12/2014, 23:19

Lo he puesto como sigue; pero parece no funcionar por alguna razón:

Código:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Ejemplo</title>

<style type="text/css">
.toggle{list-style:none;margin:20px;padding:0;}
.toggle>li{margin:3px 0;border:1px #000 solid;}
.toggle>li>strong{display:block;font:13px/33px arial,verdana,tahoma;color:#fff;background:#222;padding:0 15px;cursor:pointer;}
.toggle>li>div{display:none;padding:15px;}
</style>

<script>    
 $('.toggle>li>.title').click(function(){
   if($(this).parent().hasClass('active')){
     $(this).next().slideUp('slow').parent().removeClass('active');
   }else{            $('.toggle>li').removeClass('active').children('div').slideUp('slow');
         $(this).next().slideDown('slow').parent().addClass('active');
       }
});
</script>

</head>
<body>

<ul class="toggle">
    <li><strong class="title">titulo</strong>
        <div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
    </li>
    <li><strong class="title">titulo</strong>
        <div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
    </li>
    <li><strong class="title">titulo</strong>
        <div>Ajustando el background-size se puede hacer magia. Con esto ajustamos el tamaño de nuestro patrón, para así realizar un bonito efecto.Se puede realizar el mismo efecto con la propiedad repeating-linear-gradient, nos dará el mismo efecto anterior. Se están utilizando ahora, en lugar de porcentajes, medidas fijas. Con esto podremos personalizar aún más nuestro efecto a desear.</div>
    </li>
</ul>

</body>
</html>

JUMASOL · #11 (**permalink**) 29/12/2014, 01:13

Mis conocimientos son básicos.

Creo que hay que cargar la librería jquery-1.11.0 para que funcione.

Bien, esa librería pesa 280 kb, así que me diréis qué gano sustituyendo un método por otro, puesto que el archivo javascript que hay en el original pesa 4 kbs, y se trata de eso, de hacerlo con el menor peso posible y sin posibles conflictos.

Decidme si estoy en lo cierto. ¿Es necesaria la librería arriba indicada?

JUMASOL · #12 (**permalink**) 29/12/2014, 01:47

He encontrado este otro script:

http://www.scriptiny.com/2008/04/lig...css-accordion/

Es muy sencillo, el js sólo pesa 2kb (sin comprimir aún), lo cual no significa nada, y es muy fácil de configurar para que el primer bloque no se abra, sustituyendo

Código:

<body onload="slider.init('slider',1)">

por

Código:

<body onload="slider.init('slider')">

¿Véis algún inconveniente por el que debiera cambiarlo por otro?

Gracias.

America|UNK · #13 (**permalink**) 29/12/2014, 11:10

No hay inconveniente, y si te funcionó el último script, pues bien.
Si tú página solo es de mostrar ese contenido no hace falta cargar una librería como jQuery, caso contrario si vas a necesitar añadir más contenido a tu página con diferentes funcionalidades, por cualquier motivo te va hacer falta jQuery para que te simplifique todo el trabajo.