Toggle Plus / Minus Single Button para mostrar y ocultar mesa
Hola, Actualmente estoy usando dos botones Plus y menos, Solo necesito mostrar a tiempo un botón. cuando el botón más haga clic en la tabla oculta se mostrará y menos botón debe aparecer y más botón es ocultar. igual para el botón de menos también. más podemos decir botón de rebote. también se puede mostrar a tiempo sólo una mesa oculta.
Todo el código y la tabla actualmente trabajando bien usé este método para el acordeón pero no utilizado para la tabla.
Pregunta hecha hace 3 años, 5 meses, 6 días - Por javagiant
5 Respuestas:
-
también se puede escribir un poco más corto
$(document).ready(function() { $("#t1, #close").hide(); $('#sp1, #close').on('click', function() { $('#t1, .table-plus-btn, .table-minus-btn').toggle(); }); });
Respondida el Dec 16, 2020 a las 16:28 - por cybermage
Votos positivos: 0 | Votos negativos: 0 -
Puede ocultar / mostrar botones basados en el clic. He añadido la función toggleButtons(show) donde el espectáculo es igual a si quieres mostrar o ocultar la fila.
function toggleButtons(show) { if (show) { $("#sp1").hide(); $("#close").show(); } else { $("#sp1").show(); $("#close").hide(); } }
$(document).ready(function() { $("#t1").hide(); // hide table by default $('#sp1').on('click', function() { toggleButtons(true) $("#t1").show(); }); $('#close').on('click', function() { toggleButtons(false) $("#t1").hide(); }); function toggleButtons(show) { if (show) { $("#sp1").hide(); $("#close").show(); } else { $("#sp1").show(); $("#close").hide(); } } });
Respondida el Dec 16, 2020 a las 16:33 - por geekglitcher
Votos positivos: 0 | Votos negativos: 0 -
Si no me equivoco esto es lo que quieres hacer: Primero - Mostrar el botón más, y ocultar la mesa Segundo- Cuando más botón se hace clic en mostrar la tabla, ocultar el botón más, y mostrar el botón menos Tercero Cuando se haga clic en el botón de menos, esconda el botón menos, muestre el botón más y esconda la tabla.
Parece que tu código no funciona porque no estás escondiendo/displayando los botones en el momento adecuado. También estoy suponiendo que sólo un botón debe ser mostrado a la vez?
$(document).ready(function() { $("#t1").hide(); // hide table by default $("#close").hide(); //hide the minus button as well if you only want one button to display at a time $('#sp1').on('click', function() { //when plus button is clicked $("#t1").show(); $("#sp1").hide(); //you need to hide the plus button now $("#close").show(); //and then display the minus button }); $('#close').on('click', function() { $("#t1").hide(); //hide table $("#close").hide(); //hide minus btn $("#sp1").show(); //show plus button }); });
Respondida el Dec 16, 2020 a las 16:43 - por logiclinguist
Votos positivos: 0 | Votos negativos: 0 -
Para lograr el efecto de un toggle entre el botón de Plus y el botón de Minus para mostrar u ocultar la tabla, puedes ajustar el script de jQuery de la siguiente manera:
html $(document).ready(function() { $("
t1").hide(); // ocultar la tabla por defecto $('sp1').on('click', function() { $(this).hide(); // ocultar el botón Plus $('close').show(); // mostrar el botón Minus $("t1").show(); // mostrar la tabla }); $('close').on('click', function() { $(this).hide(); // ocultar el botón Minus $('sp1').show(); // mostrar el botón Plus $("t1").hide(); // ocultar la tabla }); });Con estos cambios, al hacer clic en el botón Plus se mostrará la tabla y se ocultará el botón Plus, mostrando en su lugar el botón Minus. Al hacer clic en el botón Minus, se ocultará la tabla y se mostrará de nuevo el botón Plus.
Espero que esta sol
Respondida el Dec 17, 2020 a las 16:29 - por Gpt
Votos positivos: 0 | Votos negativos: 0 -
Claro, aquí tienes una solución utilizando jQuery para mostrar y ocultar una tabla con un solo botón de alternancia:
javascript $(document).ready(function() { // Ocultar la tabla por defecto $("
t1").hide(); // Mostrar la tabla cuando se hace clic en el botón $("sp1").click(function() { $("t1").show(); $("sp1").hide(); $("close").show(); }); // Ocultar la tabla cuando se hace clic en el botón de cerrar $("close").click(function() { $("t1").hide(); $("sp1").show(); $("close").hide(); }); });En este código, hemos utilizado el método
show()
para mostrar la tabla y el métodohide()
para ocultarla. También hemos alternado la visibilidad de los botones "más" y "menos" utilizandohide()
yshow()
.Nota: Asegúrate de que los ID de los elementos HTML (
#sp1
,#t1
,#close
) coinciden con los ID utilizados en el código JavaScript.Respondida el Dec 17, 2020 a las 16:35 - por Gemini
Votos positivos: 0 | Votos negativos: 0