Como ocultar y mostrar botones?

[Gridalo]

Hola Amigos.

Tengo el siguiente codigo que al hacer click en el boton de "comenzar" este se oculta sin embargo hay otros 2 botones que se muestran que son "Siguiente y terminar" que se muestran en todo momento y lo que necesito es lo siguiente:

Primero que aparezca solo el boton de comenzar y que al hacer click este se oculte como ya lo hace y pasen a mostrarse los otros dos botones de "Siguiente y terminar"

Alguno podria decirme como hacerlo?

 

[samuelsuteras]

Tienes dos opciones.



Crear una clase en css estilo .hide{display:none} y agregarle o quitarla cuando se haga click en el boton de comenzar o colocar tus botones con style="display:none". De la siguiente manera:

<div class="panel_error" id="DivAEsconder"> <button id="btnComenzarGrabacion" type="button">Comenzar</button></div>
<div style="display:none;"><button id="previousBtn">Previous</button><button id="finishBtn">Finish</button></div>
<button id="nextBtn">Siguiente</button>
<div style="display: none;"> <select name="dispositivosDeAudio" id="dispositivosDeAudio"></select>
<select name="dispositivosDeVideo" id="dispositivosDeVideo"></select></div>
<button id="btnDetenerGrabacion">Terminar</button>
</div>
</div>
<div>
</div>

$(function(){
$("#btnComenzarGrabacion").click(function(){
$("#DivAEsconder").hide();
$("#btnDetenergrabacion").style.display="inline-block";
$("#nextBtn").style.display="inline-block";
});
});

 

[Gridalo]

Tienes dos opciones.



Crear una clase en css estilo .hide{display:none} y agregarle o quitarla cuando se haga click en el boton de comenzar o colocar tus botones con style="display:none". De la siguiente manera:

<div class="panel_error" id="DivAEsconder"> <button id="btnComenzarGrabacion" type="button">Comenzar</button></div>
<div style="display:none;"><button id="previousBtn">Previous</button><button id="finishBtn">Finish</button></div>
<button id="nextBtn">Siguiente</button>
<div style="display: none;"> <select name="dispositivosDeAudio" id="dispositivosDeAudio"></select>
<select name="dispositivosDeVideo" id="dispositivosDeVideo"></select></div>
<button id="btnDetenerGrabacion">Terminar</button>
</div>
</div>
<div>
</div>

$(function(){
$("#btnComenzarGrabacion").click(function(){
$("#DivAEsconder").hide();
$("#btnDetenergrabacion").style.display="inline-block";
$("#nextBtn").style.display="inline-block";
});
});

Gracias amigo, he probado el codigo lo que pasa que los botones de siguiente y terminar se ven por defecto y lo que neceito es que esten ocultos por defecto y que al hacer click al boton de Comenzar entonces este se oculte y los otros dos se comienzen a ver (perdona es que no tengo ni idea de como hacerlo)

 

[moiseseccam]

Lo hice desde el movil, se ve bien aunque no tenga buenas practicas :v
https://codi.link

 

[samuelsuteras]

Gracias amigo, he probado el codigo lo que pasa que los botones de siguiente y terminar se ven por defecto y lo que neceito es que esten ocultos por defecto y que al hacer click al boton de Comentzar entonces este se oculto y los otros dos se comienzan a ver (perdona es que no tengo ni idea de como hacerlo)

Tienes que hacer lo contrario a como lo tienes, cambia tu codigo al siguiente.

<div class="panel_error" id="DivAEsconder"> <button id="btnComenzarGrabacion" type="button">Comenzar</button></div>
<div style="display:inline-block;"><button id="previousBtn">Previous</button><button id="finishBtn">Finish</button></div>
<button id="nextBtn">Siguiente</button>
<div style="display: inline-block;"> <select name="dispositivosDeAudio" id="dispositivosDeAudio"></select>
<select name="dispositivosDeVideo" id="dispositivosDeVideo"></select></div>
<button id="btnDetenerGrabacion">Terminar</button>
</div>
</div>
<div>
</div>

$(function(){
$("#btnComenzarGrabacion").click(function(){
$("#DivAEsconder").hide();
$("#btnDetenergrabacion").style.display="none";
$("#nextBtn").style.display="none";
});
});

Lo que hice fue cambiar el display de none a inline block y con el javascript te oculta los botones

 

[Gridalo]

Lo hice desde el movil, se ve bien aunque no tenga buenas practicas :v
https://codi.link

Gracias justo asi funciona, voy a añadirlo al codigo que ya tengo que ufff para no saber nada me estoy volviendo loco jajaja

 

[samuelsuteras]

Lo hice desde el movil, se ve bien aunque no tenga buenas practicas :v
https://codi.link

Jajaja buena 🙂

Yo es que le habia entendido lo contrario jaajaja, pensaba que queria ocultarlos

 

[Gridalo]

Jajaja buena 🙂

Yo es que le habia entendido lo contrario jaajaja, pensaba que queria ocultarlos

Gracias por tu ayuda tambien! 😀

 

[eddsonh]

Aqui dejo otra version

<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>

<body>
 
<div id="divComenzar">
    <button id="btnComenzar" type="button">Comenzar</button>
</div>

<div id="divSiguiente" style="display: none;">
    <button id="btnSiguiente" type="button">Siguiente</button>
</div>

<div id="divTerminar" style="display: none;">
    <button id="btnTerminar" type="button">Terminar</button>
</div>

</body>
</html>

<script type="text/javascript">

    $(document).off('click', '#btnComenzar').on('click', '#btnComenzar', function(){

        let divComenzar = document.getElementById("divComenzar")
        divComenzar.style.display = "none"

        let divSiguiente = document.getElementById("divSiguiente")
        divSiguiente.style.display = "block"

        let divTerminar = document.getElementById("divTerminar")
        divTerminar.style.display = "block"

    })

</script>

 

[bits4me]

sin jQuery

<!DOCTYPE html>
<html>
   <head>
      <style>
         body.started #btnComenzar,
         body:not(.started) #btnSiguiente,
         body:not(.started) #btnTerminar{
           display:none;
         }
         @keyframes fade{to{opacity:1;}}
         #btnSiguiente,#btnTerminar,#btnComenzar{
           opacity:0;
           animation: fade .6s ease forwards;
           transition:opacity .6s ease;
           will-change:opacity;
         }
         .toolbar{
           display:flex;
           align-items:center;
         }
      </style>
   </head>
   <body>
      <div id="divComenzar">
         <button onclick="document.body.classList.toggle('started')" id="btnComenzar">Comenzar</button>
      </div>
      <div class="toolbar">
         <div id="divSiguiente">
            <button id="btnSiguiente">Siguiente</button>
         </div>
         <div id="divTerminar">
            <button onclick="document.body.classList.toggle('started')" id="btnTerminar">Terminar</button>
         </div>
      </div>
   </body>
</html>

 

[Usuario eliminado 263618]

Muy buenos aportes que dejan por aquí sobre como realizar esa funcionalidad con Javascript, lo guardaré para cuando vaya a realizar algunas partes especificas que requieran realizar esas acciones.