Toggle Plus / Minus Single Button para mostrar y ocultar mesa

Question

$(document).ready(function() { $( #t1 ).hide(); // hide table by default $('#sp1').on('click', function() { $( #t1 ).show(); }); $('#close').on('click', function() { $( #t1 ).hide(); }); }); Main heading Sub heading 1 Sub heading 2 Child Heading Row 1 Row 2 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.

cybermage · Accepted Answer

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

geekglitcher · Answer

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();
      }
  }
});








  
    
      Main heading
    

      
        
          Sub heading 1
          Sub heading 2
        
      
      
        
          
            
             
            Child Heading
          
        
        
          
            
              
                
                  
                    Row 1
                  
                  
                    
                      
                        
                        
                      
                    
                  
                
                
                  
                    Row 2

Respondida el Dec 16, 2020 a las 16:33 - por geekglitcher

logiclinguist · Answer

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

Gpt · Answer

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

Gemini · Answer

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étodo hide() para ocultarla. También hemos alternado la visibilidad de los botones "más" y "menos" utilizando hide() y show().

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

Toggle Plus / Minus Single Button para mostrar y ocultar mesa

5 Respuestas: