Consulta de como un icono me despliegue un formulario en DIVs

Sumerio · #1 (**permalink**) 22/10/2012, 15:40

Hola tengo una consulta, sucede ya logre implementar que al hacer click en un checkbox me muestre un formulario oculto por un DIV, solo que ahora tengo que hacer poner un icono para que haga lo mismo que el checkbox, me despliegue el formulario por el DIV.
Les muestro mi codigo:

Código:

function showContent() {
        var element = document.getElementById("capaexp1");
        var check = document.getElementById("flagRio");
        
        if (check.checked) {
            element.style.display='block';
        }
        else {
            element.style.display='none';
        }
    }


<input type="checkbox" name="beans.flagLago" onclick="showContent();"/>

<div id="capaexp1" style="display: none;" >		
	..............
</div>

Alguien sabe como podria hacerlo con un icono.

lubtufano · #2 (**permalink**) 22/10/2012, 15:54

Se me ocurre esto.

Código Javascript:

Ver original<script>
var oculto= true;
function showContent() {
        var element = document.getElementById("capaexp1");
               
        if (oculto) {
            element.style.display='block';
            oculto= false;
        }
        else {
            element.style.display='none';
            oculto= true;
        }
    }
</script>
 
<img src="icono.png" onclick="showContent();"/>
 
<div id="capaexp1" style="display: none;" >     
    ..............
</div>

Un saludo.

IsaBelM · #3 (**permalink**) 22/10/2012, 17:10

aunque el código de lubtufano funcionara. aquí te dejo otra manera de hacerlo manteniendo el checkbox y agregando una imagen

puedes hacer que sea solamente css (css3 no compatible con navegadores antiguos) con lo que quita todo el js, evento e invocación. o puedes hacerlo con js, con lo que quita el último selector css

Cita:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#chk {
width: 0;
height: 0;
overflow: hidden;
position: absolute;
}

#chk ~ label {
display: inline-block;
}

#chk ~ label ~ div{
display: none;
}

#chk:checked ~ label ~ div{
display: block;
}
</style>

<script type="text/javascript">
function fnc(bol) {
document.getElementById('frm').style.display = (bol) ? 'none' : 'block';
}
</script>
</head>
<body>

<input type="checkbox" id="chk" onclick="fnc(this.checked)" />
<label for="chk"><img src="img1.png" style="width:25px;height:25px;" alt="" /></label>
<div id="frm">el formulario</div>

</body>
</html>