Jquery + PHP

[elexavi]

Hola aver si me podeis hechar una mano,

llevoun par de semanas intentando crear un acordeon con las sub-paginas de Wordpress mediante Jquery, he conseguido crearlo y ver el diseño pero lo que no puedo hacer es que funcione, no se si es no se puede o si simplemente hago algo mal.

estoy utilizando el siguiente codigo:

Código Javascript:

<script type="text/javascript"> 
$(document).ready(function(){
    
    $(".accordion h3:first").addClass("active");
    $(".accordion p:not(:first)").hide();
 
    $(".accordion h3").click(function(){
        $(this).next("p").slideToggle("slow")
        .siblings("p:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
 
});
</script>
 

Código CSS:

<style type="text/css"> 
 
.accordion {
    width: 480px;
    border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
    background: #e9e7e7 url(http://www.dominio.com/images/arrow-square.gif) no-repeat right -51px;
    padding: 7px 15px;
    margin: 0;
    font: bold 120&#37;/100% Arial, Helvetica, sans-serif;
    border: solid 1px #c4c4c4;
    border-bottom: none;
    cursor: pointer;
}
.accordion h3:hover {
    background-color: #e3e2e2;
}
.accordion h3.active {
    background-position: right 5px;
}
.accordion p {
    background: #f7f7f7;
    margin: 0;
    padding: 10px 15px 20px;
    border-left: solid 1px #c4c4c4;
    border-right: solid 23px #000000;
}
</style>
 

Código HTML:

<div class="accordion">
  <h3>Item One</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Item Number Two</h3>
  <p>Lorem ipsum dolor sit amet.</p>
  <h3>Here is Item Three</h3>
  <p>Lorem ipsum dolor sit amet.</p>
</div>
 

esto ultimo lo estoy metiendo en el documento page.php de mi them

esper osu ayuda muchas gracias

[jackson666]

Que es lo que no logras? que se deslice?

- http://applendamos.wordpress.com/200...on-con-jquery/
- http://www.anieto2k.com/2006/11/15/e...eon-de-jquery/
- http://www.leigeber.com/2008/05/hori...ccordion-menu/

[JavierB]

Hola elexavi

Muevo tu tema al foro de Frameworks desde Javascript.

Saludos,

[mayid]

Aqui realmente pusiste un salto de renglon?

$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");

Esto va asi, claro (de corrido):

$(this).next("p").slideToggle("slow").siblings("p: visible").slideUp("slow");

[hector2c]

aver, tal vez esto te de algunas ideas

http://hector2c.wordpress.com/2010/0...para-acordeon/

[mayid]

off topic: muy lindo tu blog, Hector.

[jackson666]

Iniciado por mayid

Aqui realmente pusiste un salto de renglon?



Esto va asi, claro (de corrido):

Es exactamente lo mismo, el codigo se interpreta igual, es solo un tema de "prolijidad"...

elexavi pudiste solucionar el problema?

[elexavi]

Perdonarme que no he podido responder antes,
ya lo he probado con con todos los ejemplos y los tutoriales que me habeis pasado y corrigiendo el salto de reglon ese que me comentaron, pero nada sigue apareciendo pero el acordeon no se desliza para nada, se queda inmovil.

Voy a comentaros lo que quiero hacer, haber si lo que quiero hacer es imposible; lo que quiero hacer es con las sub-paginas de las paginas de wordpress es ponerlas en acordeon.

espero haberme explicado,

[juaniquillo]

Para eso puedes usar Ajax para cargar cada página cada vez que el usuario le de a un enlace del acordeón, o puedes cargar todo el contenido en divs diferentes y mostrarlos y ocultarlos como se hace normalmente.

[elexavi]

y en codigos como se hace eso???

[juaniquillo]

La parte de php de wordpress (como vas a cargar el contenido a la página) ya pertenece al foro de Aplicaciones Pre-fabricadas. Dependiendo de cómo trabajes el código php, el código javascript sería diferente en ambos casos.

[elexavi]

claro la carga del contenido viene en el them ahora como hago lo del acrodeon es lo que nose

[juaniquillo]

Si cargas todo el contenido a la vez haciendo un loop solamente necesitas hacer parte del acordeón. Yo usaría el acordeón de UI de jQuery:

http://jqueryui.com/demos/accordion/

A mi me tomo unos 5 minutos implementarlo usando los scripts alojados en google:

http://juaniquillo.com/codigo/jquery_ui/acordeon//

Como puedes ver sólo trabajé la funcionalidad sin el CSS.

[elexavi]

pues o yo lo hago mal o no me sale

[juaniquillo]

¿puedes dejar un enlace a lo que tienes para poder revisarlo? podría ser un ejemplo hecho en html en vez de php. También puedes revisar mi código, es bastante simple.

[elexavi]

la cuestion esq en Html osea compiando tu pagina me sale bien pero dentro del php no

[juaniquillo]

Pues tu problema es con php entonces, no con javascript, aunque lo que php presenta al final es html. deja un enlace a tu página php.

[elexavi]

te lo pase por privado

[juaniquillo]

Ya veo. Ya te he contestado por privado.

[elexavi]

este es el sript que si lo quito me funciona

Código Javascript:

<script type="text/javascript">
function sl(){
document.body.innerHTML=document.body.innerHTML.replace(/<!--=/g,"").replace(/=-->/g,"");}</script>
 

[hector2c]

jajajaja, elaxavi, seria muuucho mas comodo ayudarte, si puublicaras el código completo, y no por mensajes privados... haces perder el hilo del problema...

[juaniquillo]

Cierto, pero parece que no quiere mostrar su trabajo en desarrollo. Dale tiempo y ya se soltará un poco cuando tenga mas experiencia en el foro.

[elexavi]

La verdad es que por privado solo le he dado el link. Aunque mi andadura con ese problema sigue aunque lo aquí expuesto lo solucione y resulta que era esa scrip que puse anteriormente, ahora mi problema en como invocar solo el contenido de la sub páginas para hacer una especie de iframe creo que se dice, y como es wordpress no se como hacerlo pero creo que ya pertenece al hilo de php y no aquí

[juaniquillo]

Yo creo que ese tema es mas específico para el subforo de Wordpress en Aplicaciones Prefabricadas.

[elexavi]

Luego cuando llegue a casa Le hecho un vistao gracias unas ves mas una vez terminado meteré un link del sitio en cuestión gracias