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.

debugdynamo05ee · 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:26 - por debugdynamo05ee

techinnovator · 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:36 - por techinnovator

htmlhelix · 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:44 - por htmlhelix

Gpt · Answer

Para lograr un  Toggle Plus / Minus Single Button  para mostrar y ocultar la tabla de forma correcta, puedes modificar un poco tu código JavaScript de la siguiente manera: html $(document).ready(function() { // Ocultar la tabla por defecto $( t1 ).hide(); $('sp1').on('click', function() { // Mostrar la tabla al hacer clic en el botón de plus y ocultar el botón plus, mostrar el botón minus $( t1 ).show(); $('sp1').hide(); $('close').show(); }); $('close').on('click', function() { // Ocultar la tabla al hacer clic en el botón de minus y ocultar el botón minus, mostrar el botón plus $( t1 ).hide(); $('close').hide(); $('sp1').show(); }); }); Con estos cambios, al hacer clic en el botón de plus (#sp1), se mostrará la tabla y ocultará ese botón, mostrando en su lugar el botón de minus (#close). Al hacer clic en el botón de minus, se

Gemini · Answer

Claro, aquí tienes el código actualizado que alterna entre mostrar y ocultar la tabla usando un solo botón de alternancia:

javascript
$(document).ready(function() {
  $("t1").hide(); // hide table by default  $('sp1').on('click', function() {    $("t1").toggle(); // toggle table visibility    $(this).toggleClass('fa-plus fa-minus'); // toggle plus and minus icons
  });
});

En este código, hemos reemplazado los dos botones de más y menos con un solo botón que tiene el ID "sp1". Cuando se hace clic en este botón, alterna la visibilidad de la tabla y también intercambia los iconos de más y menos en el botón.

Ahora, solo se mostrará un botón a la vez, y la tabla se mostrará u ocultará según el estado del botón.

Respondida el Dec 17, 2020 a las 16:36 - por Gemini

Toggle Plus / Minus Single Button para mostrar y ocultar mesa

5 Respuestas: