Comprobacion de la existencia de un elemento.

[andrescev]

Bueno días, a ver, os comento el problema este, tengo una funcion que me abre una ventanica con un formulario, esta basada en mootools, del tipo lightbox.

El formulario consta de 4 radio buttons, los dos primeros no tienen efecto - de momento, luego tendre que hacer alguna funcion para pasar los resultados a php - en las dos ultimas, tienen que abrir una lista de elementos que tambien se deben seleccionar con radio buttons (y estos elementos tambien vienen de php, pero eso es otro tema) el caso es que necesito que al pinchar en uno u en otro me abra la lista de elementos, pero que solo me la habra una vez, si se pincha primero en una luego en otra que me la mantenga y si pinchan en las de arriba me la cierre en caso de que este abierta.

Os pongo lo que tengo ahora, no tiene nada con php aun, primero quiero conseguir esto.

Código Javascript:

/*
* Mootools Simple Modal
* Version 1.0
* Copyright (c) 2011 Marco Dell'Anna - http://www.plasm.it
*/
window.addEvent("domready", function(e){
  $$(".boton").addEvent("click", function(e){
    e.stop();
    var c=1;
    var SM = new SimpleModal({"btn_ok":"Confirmar"});
        SM.show({
          "model":"confirm",
          "callback": function(){
            alert("Action confirm!");
          },
          "title":"Incidencias.",
          "contents":"<form action='insert()' id='insform'>\n\
<p>Vacaciones y otras ausencias: <input type='radio' name='incidencia' value='2'></p>\n\
<p>Incapacidad temporal: <input type='radio' name='incidencia' value='3'></p>\n\
<p>Cobertura de ausencias: <input type='radio' name='incidencia' value='4' onClick='prof()'></p>\n\
<p>Cobertura de descanso post-guardia: <input type='radio' name='incidencia' value='5' onClick='prof()'></p>\n\
</form>"
        });
  });
 
  
});
 
function prof(){
  if (c>0){
  document.getElementById('insform').innerHTML += '<div id=prof1><hr width=75%>';
  document.getElementById('insform').innerHTML += 'Lista de profesionales.';
  document.getElementById('insform').innerHTML += '<p>Nombre profesional: <input type=\'radio\' name=\'cod_prof\' value=\'00\'></p><p>$centro</p></div>';
  c=0;
    } else {
    
}
}
 

La primera funcion es la que me abre el menu flotante, y la segunda funcion es la que contiene la lista de elementos.

Gracias, un saludo !

[Fuzzylog]

Cuando pinches en uno de los buttons compruebas si la lista tiene una clase propia (llamemosla abierta). Si la tiene, no se hace nada. Si no la tiene, se le asigna, y si por clase no es capaz de permanecer abierta pues se abre por js.

Cuando pinches en el otro elemento, pues haces el inverso. Si está abierta se debe cerrar y quitar la clase, y si no lo está no hacer nada.

[andrescev]

perfecto, es una buena logica, de hecho es la que estaba probando antes de leerlo, pero podrias ponerme un ejemplo de la sintaxis porque estoy un poco pez en esto de javascript... y ya se me puedes orientar en como pasar datos de php a js seria un puntazo, estoy trabajando con mootools, eso supondría usar una sintaxis propia del framework ?

[Fuzzylog]

Igual podrías meter jquery para simplificar la sintaxis (tienes que meter la libreria en tu aplicacion e importarla en el head de la pagina).
// Dado
<div id="miLista" class="abierta">Hola</div>

// La sintaxis con jquery es tan facil como esto
if ($('#miLista').hasClass('abierta')) {
$('#miLista').removeClass('abierta');
}
// o también
$('#miLista').toggleClass('abierta');
// Ambos métodos eliminan la clase abierta del div

Por otra parte en php no me manejo, lo siento.