ahi te va... bien desmunsado,
PASO1:
vas a tener un index.php y un link1.php en los dos archivos vas a tener un <ul> <li>... </ul> con N cantidad de Li que seran tus botones a cada LI tendra en su interior una etiqueta <a> obviamente para hacer el link en el href vas a poner href="link.php?pest=about" y asi sucecivamente en cada etiqueta <a> obvio vas cambiando la palabra about por el nombre de la pestaña que va abrir..
PASO 2:
en el archivo link1.php, vas a crear un <ul> que sera tu acordion ejemplo
<ul>
<li id="about" class="boton"><a href="javascript:void(0)"></a></li>
<li class="contenidoAcordion"> aqui va la informacion a mostrar cuando el acordion se abra</div>
<li id="otraSeccion" class="boton"><a href="javascript:void(0)"></a></li>
<li class="contenidoAcordion"> aqui va la informacion a mostrar cuando el acordion se abra</div>
...
</ul>
NOTA: asegurate que en tu css la clase contenidoAcordion tenga de propiedad display:none; es muy importante esta propiedad
ahi vas poniendo N cantidad de LI y les vas cambiando los ID segun el nombre que hayas usado en el HREF de las etiquetas <A> de tu archivo index (recuerda: href="link.php?pest=about" ).
PASO 3: ( la magia )
primero vas a insertar el archivo jquery que debiste bajar de jquery.com, y meterlo entre tus etiquetas <head> debajo del <tittle> luego, vas a copiar el codigo que te di, esta por demas decirte que va debajo del otro jquery ke insertaste y que va dentro de las etiquetas <script></script> aqui te lo pego de nvo:
//DECLARO PRIMERO UNA VARIABLE PARA SABER CUAL ES EL BOTON AL QUE LE DI CLICK EN EL ACORDION
var activo="";
//FUNCION QUE GUARDA LAS INSTRUCCIONES A EJECUTAR DESPUES DE LA CARGA DEL DOM O SEA CUANDO EL NAVEGADOR TERMINO DE LEER HASTA EL TAG </HTM> REGRESA A ESTA LINEA Y EJECUTA LO DE ADENTRO DE LAS LLAVES
$(function(){
//AQUI DEDCLARO QUE LA CLASE BTN AL HACER CLICK
$('.boton').click(function() {
//CON ATTR() voy a extraer el valor de la id del mismo LI, bien ahora hago una comprobacion si activo es diferente a nada lo que voy hacer es que el next() se ejecutara haciendole un slidetoggle cuando trabajamos con NEXT() se refiere al objeto DEBAJO del objecto al que estamos haciendo click en este caso al <li class="contenidoAcordion"> el SLIDETOGGLE hara que se abra como acordion empujando los otros <li> hacia abajo, pero la primera vez que lo ejecutas este IF no se ejecutara porque activo no vale nada esta vacio.
if($(activo).attr('id') != "")
{
$(activo).next().slideToggle('normal');
};
//Aqui otra comprobación donde le digo que si el id del boton que estoy clickeando es igual al id del valor activo entonces el valor de activo es igual a nada y despues un ELSE sino entonces al objeto debajo de ESTE (this) hazle un slidetoggle.
if($(this).attr('id') == $(activo).attr('id'))
{
activo="";
}
else
{
$(this).next().slideToggle('normal');
//Aqui por ultimo asigno a la variable activo el objecto al que le doy click
activo=this;
};
}
//Mando llamar la funcion que me va abrir la pestaña del acordion que seleccione
activarMenu(currentSec)
}//end DOM
PASO 4:
Bueno pero esto es cuando estas usando el acordion normalmente, ahora vamos con la funcion que va abrir la seccion que seleccionaste en el archivo index.php ya que estamos trabajando sobre el archivo link1.php. Bien ahora lo que necesitamos es crear una variable extra antes de var activo, la vamos a llamar var currentSec, pero aqui es donde vas bajar la variable que enviaste como es PHP tu archivo este lenguaje tiene una forma en recibir las variables que se envian por URL que ese metodo se le conoce como metodo GET entonces quedaria mas o menos asi
var currentSec = <php echo $_GET['pest'] ?> ;
asi nos aseguramos que venga pest y guardamos el valor dentro de una variable de javascript bien ahora viene la segunda parte del codigo la funcion que va hacer que abras la pestaña que selccionaste:
esta funcion la vas a mandar llamar antes de la llave de cierre del DOM o sea una linea antes de esto }//end DOM vas a poner como lo deje indicado arriba.
function activarMenu(sec)
{
//Aqui compruebo que el parametro sec no este vacio y como se que sec va a tener el valor de currentSec y que este a su vez va a tener el nombre del ID de la LI que voy abrir entonces uso sec para decirl que al siguiente objeto en el <li> le haga un slideToggle, no se si el return es necesario o no, jejejeje la vdd no recuerdo creo que no.
if(sec != "")
{
$('#'+sec).next().slideToggle('normal');
// return $("#"+sec+" .boton");
}
}
Bien asi es como funciona mi codigo...
ahora si lo que quieres es ponerle un atributo checked="checked" a un checkbox bien pues entonces tienes que hacer un if con PHP y saber que valor estas mandando ejemplo.
if($_GET['checkBtn']=="about")
{
$atribute= "checked='checked'";
}
else
{
$atribute= "";
}
<input type="checkbox" <?php echo $atribute; ?> />
donde checkBtn es una variable de tipo GET que le estas enviando via URL.
Saludos!
Escrito el 22 Jun 2012 05:08 pm
