Ocultar y mostrar con un click un formulario

D

Bueno, tengo un formulario demasiado largo (el cual solo pondré un fragmento para resolver la duda) y decidí hacer que pudiera ocultarse por partes para ir rellenandolo poco a poco.

El problema es que al ocultar el trozo de formulario, las lineas no ocultas de abajo no suben y se queda un buen trozo de pagina en blanco, exactamente lo que ocupa. Sino me he explicado bien guardad el codigo en html y os dareis cuenta de lo que quiero decir, el caso es que me gustaría que el trozo de pantalla en blanco que se queda se redujera y se juntaran las lineas.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin t&iacute;tulo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>
function mostrar(enla) {
obj = document.getElementById('oculto'+enla);
obj.style.visibility = (obj.style.visibility == 'hidden') ? 'visible' : 'hidden';
}
</script>

</head>

<a href="#" onclick="mostrar('1'); return false" />+</a> Datos personales
<div id="oculto1" style="visibility:hidden">

<form name="formulario" action="insertar_datos_per.php" method="post">
Nombre * <br>
<br>
Primer Apellido *<br>
<br>
Segundo Apellido *<br>
<br>
Fecha de nacimiento *<br>
Dia Mes Año <br>
NIF<br>
<br>
País de Residencia *<br>
<select name="pais" size="1">
<optgroup label="-Europa-">
<option value="1">Alemania</option>
<option value="2">Andorra</option>
<option value="3">Austria</option>
<option value="4">Bélgica</option>
<option value="5">Bulgaria</option>
<option value="6">Chipre</option>
<option value="7">Dinamarca</option>
<option value="8">Eslovenia</option>
<option value="9" selected>España</option>
<option value="10">Estonia</option>
<option value="11">Finlandia</option>
<option value="12">Francia</option>
<option value="13">Grecia</option>
<option value="14">Holanda</option>
<option value="15">Hungría</option>
<option value="16">Islandia</option>
<option value="17">Irlanda</option>
<option value="18">Italia</option>
<option value="19">Letonia</option>
<option value="20">Liechtenstein</option>
<option value="21">Lituania</option>
<option value="22">Luxemburgo</option>
<option value="23">Malta</option>
<option value="24">Noruega</option>
<option value="25">Polonia</option>
<option value="26">Portugal</option>
<option value="27">Reino Unido</option>
<option value="28">República Eslovaca</option>
<option value="29">República Checa</option>
<option value="30">Rumania</option>
<option value="31">Rusia</option>
<option value="32">Suecia</option>
<option value="33">Suiza</option>
<option value="34">Serbia y Montenegro</option>
<option value="35">Resto de Europa</option>
</optgroup>

<optgroup label="-Latinoamerica-">
<option value="36">Argentina</option>
<option value="37">Bolivia</option>
<option value="38">Brasil</option>
<option value="39">Chile</option>
<option value="40">Colombia</option>
<option value="41">Costa Rica</option>
<option value="42">Cuba</option>
<option value="43">Ecuador</option>
<option value="44">El Salvador</option>
<option value="45">Guatemala</option>
<option value="46">México</option>
<option value="47">Nicaragua</option>
<option value="48">Panamá</option>
<option value="49">Paraguay</option>
<option value="50">Perú</option>
<option value="51">Puerto Rico</option>
<option value="52">Republica Dominicana</option>
<option value="53">Uruguay</option>
<option value="54">Venezuela</option>
<option value="55">Resto de Lat.</option>
</optgroup>
<optgroup label="-Asia-">
<option value="56">China</option>
<option value="57">India</option>
<option value="58">Japón</option>
<option value="59">Resto de Asia</option>
</optgroup>
<optgroup label="-Oceania-">
<option value="60">Australia</option>
<option value="61">Nueva Zelanda</option>
<option value="62">Resto de Oceania</option>
</optgroup>
<optgroup label="-Resto del Mundo-">
<option value="63">Estados Unidos</option>
<option value="64">Canadá</option>
<option value="65">Otro</option>
</optgroup>
</select><br>
Provincia*<br>
<select name="provincia" size="1">
<optgroup label="-España-">
<option value="1">A Coruña</option>
<option value="2">Alava</option>
<option value="3">Albacete</option>
<option value="4">Alicante</option>
<option value="5">Almeria</option>
<option value="6">Asturias</option>
<option value="7">Avila</option>
<option value="8">Badajoz</option>
<option value="9">Barcelona</option>
<option value="10">Burgos</option>
<option value="11">Caceres</option>
<option value="12">Cadiz</option>
<option value="13">Cantabria</option>
<option value="14">Castellon</option>
<option value="15">Ceuta</option>
<option value="16">Ciudad real</option>
<option value="17">Cordoba</option>
<option value="18">Cuenca</option>
<option value="19">Girona</option>
<option value="20">Granada</option>
<option value="21">Guadalajara</option>
<option value="22">Guipuzcoa</option>
<option value="23">Huelva</option>
<option value="24">Huesca</option>
<option value="25">Islas baleares</option>
<option value="26">Jaen</option>
<option value="27">La rioja</option>
<option value="28">Las palmas</option>
<option value="29">Leon</option>
<option value="30">Lleida</option>
<option value="31">Lugo</option>
<option value="32">Madrid</option>
<option value="33">Malaga</option>
<option value="34">Melilla</option>
<option value="35">Murcia</option>
<option value="36">Navarra</option>
<option value="37">Ourense</option>
<option value="38">Palencia</option>
<option value="39">Pontevedra</option>
<option value="40">Salamanca</option>
<option value="41">Santa cruz de tenerife</option>
<option value="42">Segovia</option>
<option value="43">Sevilla</option>
<option value="44">Soria</option>
<option value="45">Tarragona</option>
<option value="46">Teruel</option>
<option value="47">Toledo</option>
<option value="48">Valencia</option>
<option value="49">Valladolid</option>
<option value="50">Vizcaya</option>
<option value="51">Zamora</option>
<option value="52">Zaragoza</option>
<option value="53">Resto de Europa</option>
</optgroup>
<optgroup label="-Resto del mundo-">
<option value="54">Otras prov. Europa</option>
<option value="55">Otras prov. America</option>
<option value="56">Otras prov. Asia y Oceania</option>
</optgroup>
</select>

<br><br>OTROS DATOS<br>

<br>Permiso de conducir *<br>
<SELECT name="permiso" size="5" multiple>
<option>No tengo permiso</option>
<option>A1</option>
<option>A</option>
<option>B</option>
<option>B+E</option>
<option>C1</option>
<option>C1+E</option>
<option>C</option>
<option>C+E</option>
<option>D1</option>
<option>D1+E</option>
<option>D</option>
<option>D+E</option>
<option>Autorización BTP</option>
</select>
</div>


<a href="#" onclick="mostrar('2'); return false" />+</a>Otros
<div id="oculto2" style="visibility:hidden">
<br> ajsdjad

<br><br>
</div>

</form>



</body>
</html>

Soltrac

No puedes hacer que suban porque estan ahí, ya que el javascript las quita de la vista, no las elimina.

La única manera es ocultarlas mediante programación, que eso hace que NO carguen y por lo tanto no ocuparían el espacion en blanco.

El problema es que eso haría que tuvieras que recargar la página cada vez que ocultes o descoultes, siempre que no uses AJAX claro.

B

En vez de utilizar el visibility:hidden, utiliza el display:none /display:block.
Te pego todo tu codigo ya modificado:



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Documento sin título</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script>

function mostrar(enla) {
obj = document.getElementById('oculto'+enla);
obj.style.display = (obj.style.display == 'none') ? 'inline' : 'none';
}

</script>




</head>



<a href="#" onclick="mostrar('1'); return false" />+</a> Datos personales
<div id="oculto1" style="display:none">

<form name="formulario" action="insertar_datos_per.php" method="post">
Nombre *



Primer Apellido *



Segundo Apellido *



Fecha de nacimiento *

Dia Mes Año

NIF



País de Residencia *

<select name="pais" size="1">
<optgroup label="-Europa-">
<option value="1">Alemania</option>
<option value="2">Andorra</option>
<option value="3">Austria</option>
<option value="4">Bélgica</option>
<option value="5">Bulgaria</option>
<option value="6">Chipre</option>
<option value="7">Dinamarca</option>
<option value="8">Eslovenia</option>
<option value="9" selected>España</option>
<option value="10">Estonia</option>
<option value="11">Finlandia</option>
<option value="12">Francia</option>
<option value="13">Grecia</option>
<option value="14">Holanda</option>
<option value="15">Hungría</option>
<option value="16">Islandia</option>
<option value="17">Irlanda</option>
<option value="18">Italia</option>
<option value="19">Letonia</option>
<option value="20">Liechtenstein</option>
<option value="21">Lituania</option>
<option value="22">Luxemburgo</option>
<option value="23">Malta</option>
<option value="24">Noruega</option>
<option value="25">Polonia</option>
<option value="26">Portugal</option>
<option value="27">Reino Unido</option>
<option value="28">República Eslovaca</option>
<option value="29">República Checa</option>
<option value="30">Rumania</option>
<option value="31">Rusia</option>
<option value="32">Suecia</option>
<option value="33">Suiza</option>
<option value="34">Serbia y Montenegro</option>
<option value="35">Resto de Europa</option>
</optgroup>

<optgroup label="-Latinoamerica-">
<option value="36">Argentina</option>
<option value="37">Bolivia</option>
<option value="38">Brasil</option>
<option value="39">Chile</option>
<option value="40">Colombia</option>
<option value="41">Costa Rica</option>
<option value="42">Cuba</option>
<option value="43">Ecuador</option>
<option value="44">El Salvador</option>
<option value="45">Guatemala</option>
<option value="46">México</option>
<option value="47">Nicaragua</option>
<option value="48">Panamá</option>
<option value="49">Paraguay</option>
<option value="50">Perú</option>
<option value="51">Puerto Rico</option>
<option value="52">Republica Dominicana</option>
<option value="53">Uruguay</option>
<option value="54">Venezuela</option>
<option value="55">Resto de Lat.</option>
</optgroup>
<optgroup label="-Asia-">
<option value="56">China</option>
<option value="57">India</option>
<option value="58">Japón</option>
<option value="59">Resto de Asia</option>
</optgroup>
<optgroup label="-Oceania-">
<option value="60">Australia</option>
<option value="61">Nueva Zelanda</option>
<option value="62">Resto de Oceania</option>
</optgroup>
<optgroup label="-Resto del Mundo-">
<option value="63">Estados Unidos</option>
<option value="64">Canadá</option>
<option value="65">Otro</option>
</optgroup>
</select>

Provincia*

<select name="provincia" size="1">
<optgroup label="-España-">
<option value="1">A Coruña</option>
<option value="2">Alava</option>
<option value="3">Albacete</option>
<option value="4">Alicante</option>
<option value="5">Almeria</option>
<option value="6">Asturias</option>
<option value="7">Avila</option>
<option value="8">Badajoz</option>
<option value="9">Barcelona</option>
<option value="10">Burgos</option>
<option value="11">Caceres</option>
<option value="12">Cadiz</option>
<option value="13">Cantabria</option>
<option value="14">Castellon</option>
<option value="15">Ceuta</option>
<option value="16">Ciudad real</option>
<option value="17">Cordoba</option>
<option value="18">Cuenca</option>
<option value="19">Girona</option>
<option value="20">Granada</option>
<option value="21">Guadalajara</option>
<option value="22">Guipuzcoa</option>
<option value="23">Huelva</option>
<option value="24">Huesca</option>
<option value="25">Islas baleares</option>
<option value="26">Jaen</option>
<option value="27">La rioja</option>
<option value="28">Las palmas</option>
<option value="29">Leon</option>
<option value="30">Lleida</option>
<option value="31">Lugo</option>
<option value="32">Madrid</option>
<option value="33">Malaga</option>
<option value="34">Melilla</option>
<option value="35">Murcia</option>
<option value="36">Navarra</option>
<option value="37">Ourense</option>
<option value="38">Palencia</option>
<option value="39">Pontevedra</option>
<option value="40">Salamanca</option>
<option value="41">Santa cruz de tenerife</option>
<option value="42">Segovia</option>
<option value="43">Sevilla</option>
<option value="44">Soria</option>
<option value="45">Tarragona</option>
<option value="46">Teruel</option>
<option value="47">Toledo</option>
<option value="48">Valencia</option>
<option value="49">Valladolid</option>
<option value="50">Vizcaya</option>
<option value="51">Zamora</option>
<option value="52">Zaragoza</option>
<option value="53">Resto de Europa</option>
</optgroup>
<optgroup label="-Resto del mundo-">
<option value="54">Otras prov. Europa</option>
<option value="55">Otras prov. America</option>
<option value="56">Otras prov. Asia y Oceania</option>
</optgroup>
</select>



OTROS DATOS



Permiso de conducir *

<SELECT name="permiso" size="5" multiple>
<option>No tengo permiso</option>
<option>A1</option>
<option>A</option>
<option>B</option>
<option>B+E</option>
<option>C1</option>
<option>C1+E</option>
<option>C</option>
<option>C+E</option>
<option>D1</option>
<option>D1+E</option>
<option>D</option>
<option>D+E</option>
<option>Autorización BTP</option>
</select>
</div>


<a href="#" onclick="mostrar('2'); return false" />+</a>Otros
<div id="oculto2" style="display:none">

ajsdjad




</div>

</form>



</body>
</html>

Saludos.

SeiYa

http://wallack.es/mundopolis/index.php?Operacion=Registro

Ahora te toca a ti el copy & paste :P

Usuarios habituales