JavaScript - mostrar y ocultar div

 
Vista:
Imágen de perfil de jhon
Val: 10
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

mostrar y ocultar div

Publicado por jhon (3 intervenciones) el 12/09/2020 03:07:46
hola he querido hacer un sección con div que en principio este oculto y después se muestra con el clic pero solo logro que lo muestre y no se oculta, prodrian por favor ayudarme, quiero que sean tres secciones a medida que se avanza se muestre y oculten,

conculta
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

mostrar y ocultar div

Publicado por joel (895 intervenciones) el 12/09/2020 11:06:48
No tienes que ponerle un id al elemento, sino que tienes que añadirle o quitarle la clase CSS

En vez de utilizar mostrar.id=.... tienes que utilizar

mostrar.classList.add() o mostrar.classList.remove() segun sea necesario.

Si no te sale, pega tu código para que pueda copiarlo y modificarlo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de jhon
Val: 10
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

mostrar y ocultar div

Publicado por jhon (3 intervenciones) el 12/09/2020 18:33:04
pues tate pero no me funciono, aquí te envió el código de la idea muchas gracias...

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<style>
.oculto{
      visibility: hidden;
        }
.divvisible{
          visibility: visible;
          width: 100px;
          background: red;
          height: 70px;
 
        }
 </style>
 
 	<!---se muestre el primer div que debe estar oculto--->
	<button type="button" onclick="mostrarDiv()"> mostar </button>
 
    <div class="next-secc">
    <p>div1 oculto</p>
    </div>
 
    <!---se muestre el segundo div, se oculte el primero--->
    <button type="button" onclick="mostrarDiv()"> mostar </button>
    <div class="next-secc">
    <p>div2 oculto</p>
    </div>
    <!---se muestre el tercer div, se oculte el segundo--->
    <button type="button" onclick="mostrarDiv()"> mostar </button>
    <div class="next-secc">
    <p>div3 oculto</p>
    </div>
    <!---se oculte el todo--->
    <button type="button" onclick="ocultarDiv()"> finalizar </button>
 
 <script>
 	if(mostrarDiv()==false;)//quisiera que se alternen los eventos a medida que se va pasando por cada boton..
 	{
       function mostrarDiv(){
           var mostrar = document.getElementsByClassName("next-secc");
          mostrar.classList.add() = "divvisible";
       }else{
       function ocultarDiv(){
           var ocultar = document.getElementsByClassName("next-secc");
           ocultar.classList.remove()  = "oculto";
 		}
 	}
    </script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de joel
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

mostrar y ocultar div

Publicado por joel (895 intervenciones) el 13/09/2020 09:14:26
Hola Jhon, classList.add() es una funcion, por lo que el parametro va dentro del parentesis... seria algo así
1
mostrar.classList.add("divvisible");
Aunque mostrar tendría que ser un elemento, y en tu código es HTMLCollection, no un elemento, por lo que tampoco te funcionara

te he modificado un poco el código haber si te sirve.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
 
<style>
.next-secc{
    visibility: visible;
    width: 100px;
    background: red;
    height: 70px;
}
.oculto{
  visibility: hidden;
}
</style>
</head>
<body>
 
    <!---se muestre el primer div que debe estar oculto--->
    <button type="button" onclick="mostrarDiv(0)"> mostar </button>
 
    <div class="next-secc oculto">
    <p>div1 oculto</p>
    </div>
 
    <!---se muestre el segundo div, se oculte el primero--->
    <button type="button" onclick="mostrarDiv(1)"> mostar </button>
    <div class="next-secc oculto">
    <p>div2 oculto</p>
    </div>
 
    <!---se muestre el tercer div, se oculte el segundo--->
    <button type="button" onclick="mostrarDiv(2)"> mostar </button>
    <div class="next-secc oculto">
    <p>div3 oculto</p>
    </div>
 
    <!---se oculte el todo--->
    <button type="button" onclick="ocultarDiv()"> finalizar </button>
 
    <script>
    function mostrarDiv(indice){
        ocultarDiv();
        Array.from(document.getElementsByClassName("next-secc"))[indice].classList.remove("oculto");
    }
    function ocultarDiv(){
        Array.from(document.getElementsByClassName("next-secc")).forEach(el => el.classList.add("oculto"));
    }
    </script>
 
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de jhon
Val: 10
Ha disminuido su posición en 10 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

mostrar y ocultar div

Publicado por jhon (3 intervenciones) el 15/09/2020 17:41:40
super la funcionalidad, pero el div uno no se muestra osea el oculto... pues igual empece a mostrar los elementos desde el div 2 y funciona muchas gracias, muy buen la lógica
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Jaime
Val: 60
Ha aumentado su posición en 2 puestos en JavaScript (en relación al último mes)
Gráfica de JavaScript

mostrar y ocultar div

Publicado por Jaime (30 intervenciones) el 13/09/2020 10:55:23
Otra opción es ponerle display none
1
2
3
4
5
var mostrar = document.getElementsByClassName("next-secc");
mostrar.style.display='block' //o el de tu preferencia
//Y viceversa
var mostrar = document.getElementsByClassName("next-secc");
mostrar.style.display='none'
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar