[SOLUCIONADO] Ocultar DIV dentro de un DIV

augusto_jaramil · #1 (**permalink**) 02/04/2020, 17:23

Buenas a tod@s,

Tengo el siguiente código:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
  <head>
  </head>
  <body>
    <div id="contenedor">
      <form name="pruebaDiv" onsubmit="return false" action="return false">
        <table align="center">
          <td>Campo1:</td><td><input type="text"></td><tr />
          <td>Campo2:</td><td><input type="text"></td><tr />
 
          <div id="Div1" style="display:none">
            <td>Campo3:</td><td><input type="text"></td><tr />
            <td>Campo4:</td><td><input type="text"></td><tr />
          </dv>
        </table>
      <form>
    <div>
  </body>
</html>

La idea es que al cargar la pagina el <div id="Div1" style="display:none">
no se visualice ya que el display:none no toma efecto. Este se deberá visualizar cuando se ocupe Campo2

Agradezco su valiosa ayuda y opiniones al respecto

Triby · #2 (**permalink**) 02/04/2020, 17:57

El problema es que tienes un HTML mal formado, no puedes usar un div para poner dentro elementos de tabla y estás cerrando filas </tr> que no abriste.

Antes de proponer una solución: Es necesario usar tabla?

sgr · #3 (**permalink**) 03/04/2020, 06:21

Al margen de lo que te respondio Triby, estan mal cerrados los 2 divs. El "contenedor" tiene la etiqueta <div> en vez de </div> el "Div1" esta mal cerrado, dice </dv> en vez de </div>

augusto_jaramil · #4 (**permalink**) 03/04/2020, 07:19

Mil Gracias Sr. Triby y Sgr,

Gracias por sus aclaraciones

augusto_jaramil · #5 (**permalink**) 03/04/2020, 09:01

El script lo puse a cancionar asi:

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es">
  <head>
    <script type="text/javascript">
      function SelTipo() {
        document.getElementById('Sec2').style.display = 'block';
      }
    </script>
  </head>
  <body>
    <div id="contenedor" align="center">
      <form name="pruebaDiv" onsubmit="return false" action="return false">
          <section id="Sec1" style="line-height:25px;">
            <table>
              <tr><td>Campo1:</td><td><input type="text"></td></tr>
              <tr><td>Campo2:</td><td><input type="text"></td></tr>
              <tr><td align="right">Tipo:</td><td><select id='tipo' name='tipo' onChange="SelTipo();" required>
                    <option value="" selected>Elija Uno</option>
                    <option VALUE="C">Cliente</option>
                    <option VALUE="P">Proveedor</option>
                    <option VALUE="O">Otro</option>
                  </select>
              </td></tr>
            </table>
          </section>
 
          <section id="Sec2" style="display:none; line-height:25px">
            <table>
              <tr><td>Campo3:</td><td><input type="text"></td></tr>
              <tr><td>Campo4:</td><td><input type="text"></td></tr>
            </table>
          </section>
      <form>
    <div>
  </body>
</html>

De nuevo mil gracias Sr. Triby y Sgr