mostrar/ocultar palabras

soriaromanm · #1 (**permalink**) 27/12/2011, 03:53

Buenas gentes.
Queria consultaros como seria posible mostar u ocultar una linea de texto de la pagina segun el estado de un checkbox
con hidden puedo afectar a otros elementos, como textbox y buttons pero lineas de texto tal cuales nada de nada
¿podeis mostrarme algun ejemplo simple o algo similar que tengais por ahi?
Gracias de antemano por el interes

cristian_cena · #2 (**permalink**) 27/12/2011, 04:46

en este tema mostramos/ocultamos una imagen a través de un checkbox, espero el ejemplo te sirva. Solo deberías remplazar la imagen por por ejemplo un <p> o un <span>.

Saludos.

kseso? · #3 (**permalink**) 27/12/2011, 08:03

Si muestra su html sería mejor.
¿Lo quiere hacer con puro css?

IsaBelM · #4 (**permalink**) 27/12/2011, 14:59

cristian, en primer lugar enhorabuena por tu nombramiento

hasta ahora no me había fijado

por otro lado, espero que no te importe que exponga alguna modificación a tu código

Cita:

window.addEventListener('load', function() {
document.getElementById("check").addEventListener( 'click', function() {
this.nextSibling.nextSibling.className = this.checked ? 'muestra' : 'oculta';
}, true);
}, true);

<form action="">
<input id="check" type="checkbox" />
<p class="oculta">texto</p>
</form>

Cita:

Iniciado por kseso?

Si muestra su html sería mejor.
¿Lo quiere hacer con puro css?

es posible hacerlo únicamente con css??

cristian_cena · #5 (**permalink**) 27/12/2011, 15:26

Gracias isabel, no me aguanté de testearlo. Muy bueno, nunca había asignado clases sin jquery (x_X) así que me vino bien para aprender a mi también.
Pues supongo que kseso mostraría contenido oculto mas o menos como lo hacen acá

Saludos

ryugen · #6 (**permalink**) 28/12/2011, 06:02

Cita:

Iniciado por IsaBelM

es posible hacerlo únicamente con css??

Si se puede, pero funciona de IE 8 en adelante.
Y en todos los navegadores modernos.
En este ejemplo: http://jsfiddle.net/p4bl1t0/PPZyk/
Oculta exactamente el elemento posterior, pero jugando un poco con CSS se pueden lograr muchas cosas más.

cristian_cena · #7 (**permalink**) 28/12/2011, 06:45

Que bueno ryugen, lo que hiciste es un canto a la vida

Tu código es ie6+ con http://code.google.com/p/ie7-js/, simplemente agregando:

Código HTML:

Ver original<!--[if lt IE 9]>
<script src="http://ie7-js.googlecode.com/svn/version/2.1(beta4)/IE9.js"></script>
<![endif]-->

Verificado en mi ietester. También prové con http://selectivizr.com/ pero no funcionó.

kseso? · #8 (**permalink**) 28/12/2011, 08:15

Efectivamente, ryugen.
Con la pseudoclase :checked y el selector de adyacente/hermanos y jugando con las distintas combinaciones de ellos y cambio de propiedades.
Algo así como:

Código CSS:

Ver original[type=radio]:checked ~ label {  }
[type=radio]:checked ~ label ~ .caja {  }
[type=radio]:checked ~ label ~ .caja > * {  }

Donde .caja es cualquier elemento de bloque para contener lo que queramos meter dentro.

Es una buena forma de hacer las famosas tabs o navegación por pestañas con efecto persistente (que se mantenga seleccionado un grupo de elementos aunque se pinche en otros ajenos a él).

Tengo por ahí un medio juego en base a una realización de Chris Coyier (fue a quien primero se lo vi hacer), pero como no tengo servidor para subirla como ejemplo y el consultante desapareció... esperaremos, pues.

Cristian, creo que te confundiste de enlace. Ese es sobre fondos.

soriaromanm · #9 (**permalink**) 29/12/2011, 04:38

Subo el código de donde quiero aplicar esto, el problema es que ese apartado en concreto esta en php

Codigo a modificar:

Código PHP:

Ver original<HTML>
<HEAD>
    <TITLE>SIMULACION DE MINICONSULTA ENTIDAD OTRA VEZ</TITLE>
 
<?php
    include("conex.php");
    $link=Conectarse();
    $result=mysql_query("select * from gente order by nombre",$link);
    $vias=mysql_query("select * from vias",$link);
    $provincias=mysql_query("select * from provincias",$link);
    $categorias=mysql_query("select categoria from categorias order by codigo",$link);
?>
 
 
<SCRIPT LANGUAGE="javaScript">
function MostarCajaTexto1(){ 
    if(frmDatos.cmbcif.checked){ 
        frmDatos.txtcif.style.visibility='visible'
    }else{ 
        frmDatos.txtcif.style.visibility='hidden'
    } 
} 
function MostarCajaTexto2(){ 
    if(frmDatos.cmbnombre.checked){ 
        frmDatos.txtnombre.style.visibility='visible'
    }else{
        frmDatos.txtnombre.style.visibility='hidden'
    }
}
function MostarCajaTexto3(){ 
    if(frmDatos.cmbtelefono.checked){ 
        frmDatos.txttelefono.style.visibility='visible' 
    }else{ 
        frmDatos.txttelefono.style.visibility='hidden' 
    } 
} 
function MostarCajaTexto4(){ 
    if(frmDatos.cmbfax.checked){ 
        frmDatos.txtfax.style.visibility='visible' 
    }else{ 
        frmDatos.txtfax.style.visibility='hidden' 
    } 
}
function MostarCajaTexto5(){ 
    if(frmDatos.cmblocalidad.checked){ 
        frmDatos.txtlocalidad.style.visibility='visible' 
    }else{ 
        frmDatos.txtlocalidad.style.visibility='hidden' 
    } 
}
function MostarCajaTexto6(){ 
    if(frmDatos.cmbprovincia.checked){ 
        frmDatos.txtprovincia.style.visibility='visible' 
    }else{ 
        frmDatos.txtprovincia.style.visibility='hidden' 
    } 
}
function MostarCajaTexto7(){ 
    if(frmDatos.cmbpostal.checked){ 
        frmDatos.txtpostal.style.visibility='visible' 
    }else{ 
        frmDatos.txtpostal.style.visibility='hidden' 
    } 
}
function MostarCajaTexto8(){ 
    if(frmDatos.cmbpais.checked){ 
        frmDatos.txtpais.style.visibility='visible' 
    }else{ 
        frmDatos.txtpais.style.visibility='hidden' 
    } 
} 
 
function MostarCajaTexto9(){ 
    if(frmDatos.cmbdireccion.checked){ 
        frmDatos.via.style.visibility='visible'
        frmDatos.txtdireccion.style.visibility='visible' 
    }else{ 
        frmDatos.via.style.visibility='hidden'
        frmDatos.txtdireccion.style.visibility='hidden' 
    } 
} 
function MostarCajaTexto10(){ 
    if(frmDatos.cmbemail.checked){ 
        frmDatos.txtemail.style.visibility='visible' 
    }else{ 
        frmDatos.txtemail.style.visibility='hidden' 
    } 
} 
function MostarCajaTexto11(){ 
    if(frmDatos.cmbweb.checked){ 
        frmDatos.txtweb.style.visibility='visible' 
    }else{ 
        frmDatos.txtweb.style.visibility='hidden' 
    } 
} 
function MostrarCajaTexto12(){
    if(frmDatos.cmbweb.checked){
        
    }else{
    
    }
}
</SCRIPT> 
<HEAD> 
<BODY> 
 
<H1>Formulario de Busqueda:</H1>
 
<FORM NAME=frmDatos>
<TABLE>
<TR><TD>CIF/NIF:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbcif onclick="MostarCajaTexto1()">
<INPUT TYPE=text NAME=txtcif style="visibility:hidden" ><BR>
</TD></TR>
<TR><TD>NOMBRE:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbnombre onclick="MostarCajaTexto2()">
<INPUT TYPE=text NAME=txtnombre style="visibility:hidden" ><BR>
</TD></TR>
<TR><TD>TELEFONO:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbtelefono onclick="MostarCajaTexto3()">
<INPUT TYPE=text NAME=txttelefono style="visibility:hidden" ><BR>
</TD></TR>
<TR><TD>FAX:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbfax onclick="MostarCajaTexto4()">
<INPUT TYPE=text NAME=txtfax style="visibility:hidden" > 
</TD></TR>
<TR><TD>LOCALIDAD:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmblocalidad onclick="MostarCajaTexto5()">
<INPUT TYPE=text NAME=txtlocalidad style="visibility:hidden" > 
</TD></TR>
<TR><TD>PROVINCIA:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbprovincia onclick="MostarCajaTexto6()">
<INPUT TYPE=text NAME=txtprovincia style="visibility:hidden" > 
</TD></TR>
<TR><TD>CODIGO POSTAL:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbpostal onclick="MostarCajaTexto7()">
<INPUT TYPE=text NAME=txtpostal style="visibility:hidden" > 
</TD></TR>
<TR><TD>PAIS:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbpais onclick="MostarCajaTexto8()">
<INPUT TYPE=text NAME=txtpais style="visibility:hidden" > 
</TD></TR>
<TR><TD>DIRECCION:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbdireccion onclick="MostarCajaTexto9()">
 
 
<SELECT NAME="via" style="visibility:hidden">
    <?php
        while($now = mysql_fetch_array($vias)){
            printf("<OPTION VALUE=%s>%s</OPTION>",$now["codvia"],$now["via"]);
        }
    ?>
</SELECT>
 
<INPUT TYPE=text NAME=txtdireccion style="visibility:hidden" > 
</TD></TR>
<TR><TD>EMAIL:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbemail onclick="MostarCajaTexto10()">
<INPUT TYPE=text NAME=txtemail style="visibility:hidden" > 
</TD></TR>
<TR><TD>WEB:</TD><TD>
<INPUT TYPE="CHECKBOX" name=cmbweb onclick="MostarCajaTexto11()">
<INPUT TYPE=text NAME=txtweb style="visibility:hidden" > 
</TD></TR>
<TR><TD>CATEGORIAS:</TD><TD>
<INPUT TYPE="CHECKBOX" NAME=cmbcategoria onclick="MostrarCajaTexto12()">
</TD></TR>
 
<?php
$number=1;
$linea=0;   
    while($now = mysql_fetch_array($categorias)){
            
        if($number>1){
            printf("<TD><INPUT TYPE='CHECKBOX' NAME='check[%s]' value=%s onclick='pulsarsi(this)'><hide>%s</
hide></TD>",$number,$number,$now["categoria"]);
            $linea++;
        }else{
            printf("<TD><INPUT TYPE='CHECKBOX' NAME='check[%s]' value=%s onclick='pulsarno(this)'><hide>%s</hide></TD>",$number,$number,$now["categoria"]);
            $linea++;
        }
            $number++;
                
        if($linea==4){
            printf("</TR><TR>");
            $linea=0;
        }
        
    }
    printf("</TR>");
    
?>
<TR><TD>
<INPUT TYPE="BUTTON" NAME="llamar" VALUE="Buscar">
</TD></TR>
 
</TABLE>
</FORM>
</BODY>
</HTML>

los textos que quiero ocultar son los que se muestran en "categorias" a continuacion de otro checkbox (que también ocultaríamos/mostraríamos).

Si esto es muy complicado (por las lineas que tiene y el esfuerzo que supone interpretar código ajeno) subo un código mas sencillo de ejemplo desde el cual yo lo aplicaría a lo anterior (tampoco va a ser cosa de no hacer nada XD)

Miniprograma ejemplo:

Código HTML:

Ver original<HTML>
<HEAD>
<TITLE>Muestra/Oculta</TITLE>
 
 
 
<SCRIPT LANGUAGE="javaScript">
 
function Mostar(){ 
    if(frm.manda.checked){ 
        frm.check1.style.visibility='visible'
        frm.check2.style.visibility='visible'
    }else{ 
        frm.check1.style.visibility='hidden'
        frm.check2.style.visibility='hidden'
    } 
} 
 
</SCRIPT>
 
</HEAD>
<BODY>
 
<FORM NAME=frm>
<TABLE BORDER = 2>
    
    <TR>
        <TD COLSPAN=2><INPUT TYPE='CHECKBOX' NAME='manda'  onclick="Mostar()">MOSTRAR/OCULTAR </TD>
    </TR>
    <TR>
        <TD><INPUT TYPE='CHECKBOX' NAME='check1' ID='check[1]' value="1" style="visibility:hidden" >OPCION 1</TD>
        <TD><INPUT TYPE='CHECKBOX' NAME='check2' ID='check[2]' value="2" style="visibility:hidden" >OPCION 2</TD>
    </TR>
</TABLE>
</FORM>
</BODY>
</HTML>

aleksdj · #10 (**permalink**) 29/12/2011, 11:20

Creo que la mejor solucion es usar la libreria jquery para evitar problemas de compatibilidad hacia atrás, con cualquiera de los métodos expuestos es suficiente, yo usaria el método toggle() del jquery que te da el mismo resultado con menos código.salu2

kseso? · #11 (**permalink**) 30/12/2011, 15:25

soriaromanm:
Visto que se decanta por utilizar js, creo que le convendría pedir le trasladen su consulta al foro correspondiente.

Cita:

Iniciado por aleksdj

Creo que la mejor solucion es usar la libreria jquery para evitar problemas de compatibilidad hacia atrás, con cualquiera de los métodos expuestos es suficiente, yo usaria el método toggle() del jquery que te da el mismo resultado con menos código.salu2

Eso es sin contar todo el código de la librería. Supongo.

Todo lo anterior sólo es a efectos introductorios de un ejemplo realizado con css.
Sólo a efectos de ilustrar la pseudoclase :checked. El funcionamiento de los inputs y otras cuestiones no las contemplo:

Código HTML:

Ver original<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<title>Kseso? jugando con css</title>
<style type="text/css">
form {
  position: relative;
  width: 200px;
  border: 1px solid blue;
}
[type=radio] ~ label ~ div {display: none;}
[type=radio]:checked ~ label ~ div {display: block;}
 </style>
</head>
<body>
      <form>
       <input type="radio" id="tab-1" name="tab-group-1" checked>
       <label for="tab-1">Label 1</label>
          <div>  
            <input type="radio" id="tab-1_1" name="tab-group-1">
            <label for="tab-1_1">Label 1.2</label>
            <input type="radio" id="tab-1_2" name="tab-group-1">
            <label for="tab-1_2">Label 1.3</label>
          </div>       
      </form>
</body>
</html>

IsaBelM · #12 (**permalink**) 31/12/2011, 06:54

me ha asaltado un duda, cuando dices

Cita:

Iniciado por kseso?

Es una buena forma de hacer las famosas tabs o navegación por pestañas con efecto persistente (que se mantenga seleccionado un grupo de elementos aunque se pinche en otros ajenos a él).

que yo sepa sólo hay dos objetos elementos que admiten el atributo checked (radio y checkbox) y la navegación por pestaña se realizan con objetos elementos en bloque (div, ul, p) y éstos no admiten el atributo checked. entonces la pregunta es, como se podría realizar?? lo que yo uso es la pseudo clase :target

ryugen · #13 (**permalink**) 31/12/2011, 08:22

Cita:

Iniciado por IsaBelM

me ha asaltado un duda, cuando dices

que yo sepa sólo hay dos objetos elementos que admiten el atributo checked (radio y checkbox) y la navegación por pestaña se realizan con objetos elementos en bloque (div, ul, p) y éstos no admiten el atributo checked. entonces la pregunta es, como se podría realizar?? lo que yo uso es la pseudo clase :target

A lo que se debe referir kseso es a lo siguiente:
http://jsfiddle.net/p4bl1t0/PPZyk/1/
Tabs completamente funcionales sin javascript.

Lo unico de jquery que tiene es para que al tocar el checkbox se muestren los radios button escondido.

Obviamente esto es una prueba de concepto, se puede retocar mucha la estetica, pero la funcionalidad seria esa

kseso? · #14 (**permalink**) 31/12/2011, 09:49

Todo está en la concatenación del selector ~
En css2.1 era marcado como error pero no así en css3

Cita:

[type=radio] ~ label ~ div {display: none;}
[type=radio]:checked ~ label ~ div {display: block;}

ryugen
Los checbox se pueden esconder sin necesidad de js y seguir funcionando las tabs.

Código CSS:

Ver original[type="radio"] {
    display: none;
}

Probado de forma muy rápida en el ejemplo que enlaza (eliminado el js, claro).

La próxima semana, ya con tiempo les busco una realización funcionando.
Mientras, pasen por css-tricks.com que seguramente no les costará mucho encontrarla. Creo que la publicó en agosto o septiembre.

ryugen · #15 (**permalink**) 31/12/2011, 10:10

Me mal interpretaste, las tabs, funcionan 100% sin javascript. EL codigo ese, está para aquel que quiera ver elejemplo y ver el mecanismo, pueda ocultar/mostrar los radio button. Porque uno lo ve asi ya armado y parece magia negra. Entonces le puse esa opcion para mostrarlos.

Aca una version sin ese codigo jQuery de las tab perfectamente funcionando:
http://jsfiddle.net/p4bl1t0/PPZyk/2/

IsaBelM · #16 (**permalink**) 02/01/2012, 07:58

acabáramos!! nunca se me habría ocurrido usar radios en ese contexto

gracias a ambos

kseso? · #17 (**permalink**) 02/01/2012, 12:54

Cita:

Iniciado por ryugen

Lo unico de jquery que tiene es para que al tocar el checkbox se muestren los radios button escondido.

Cita:

Iniciado por kseso?

ryugen
Los checbox se pueden esconder sin necesidad de js y seguir funcionando las tabs.

Probado de forma muy rápida en el ejemplo que enlaza (eliminado el js, claro).

Cita:

Iniciado por ryugen

Me mal interpretaste, las tabs, funcionan 100% sin javascript. EL codigo ese, está para aquel que quiera ver elejemplo y ver el mecanismo, pueda ocultar/mostrar los radio button. Porque uno lo ve asi ya armado y parece magia negra. Entonces le puse esa opcion para mostrarlos.

Fue generoso. Gracias.
No, no fue una mala interpretación de lo que escribió. Fue directamente un no enterarme.
Así que mis disculpas.
Al Cesar lo que es del Cesar...