Terciopelo plegable dentro de la mesa de arranque

Question

Estoy tratando de añadir un div collapsible dentro de mi mesa de arranque. Estoy tratando de hacer esto dentro de mi primera columna después de la cabecera titulada  COLLAPSE HERE He envuelto el icono abajo en un anchor tag tratando de tener el icono ser el rebote del collapsible. Entonces anidaba un Envolver alrededor de la fila de la mesa que me gustaría aparecer / ocultar en la remolacha. Actualmente, esto no tiene efecto en mi mesa. Estoy usando el método de bootstraps collapsable pero si esto se puede lograr en javascript que funciona bien. Aquí está un fragmento de código de mi código: [email protected]/dist/js/bootstrap.min.js > [email protected]/dist/css/bootstrap.min.css  rel= stylesheet /> First Second Third Four TITLE COLLAPSE HERE Online Stores 1 2 3 4 Retail 1 2 3 4 Appointment 1 2 3 4 Orders Mi resultado esperado es tener todo bajo la primera fila bajo el título  COLLAPSE AQUÍ  e icono para colapsar la mesa.

quantumquill · Accepted Answer

Aquí hay una opción JavaScript de vainilla que añade animación al colapso.

Cogí el div deseas colapso, y clase para el chevron. Uso querySelector() ya que sólo hay una de cada una de estas clases en su código y este método selector devolverá la primera iteración de esa clase. Luego agrego un eventoListener click y añadir un condicional para comprobar si el elemento objetivo, .col tiene opacidad establecido 0. Si está listo 0 fijamos una transición all .5s ease-in-out, medio segundo descanso en la opacidad. Arreglamos el Y overflow a escondido y luego cambiar el chevron eliminando el arriba y añadiendo el abajo, utilizando .remove() y .add() sobre event.target = chevron.

más también añadimos un animación de transición y revertir el fas clases de nuevo .add() y .remove().

let col = document.querySelector('.col');
let fas = document.querySelector('.fas');
let digit3 = document.getElementById('digit3');

const collapsable = (e) => {
  fas.classList.toggle('fa-chevron-down');
  if (col.style.opacity === '0') {
    col.style.opacity = '1';
    digit3.children[0].innerText = 'COLLAPSE HERE';
    col.style.transition = 'all .5s ease-in-out';
    col.style.transition = '-webkit-transition: all .2s ease-in-out';
    col.style.transition = '-moz-transition: all .2s ease-in-out';
    col.style.transition = '-ms-transition: all .2s ease-in-out';
    col.style.transition = '-o-transition: all .2s ease-in-out';
    col.style.overflowY = 'hidden';
    e.target.classList.remove('fa-chevron-down');
    e.target.classList.add('fa-chevron-up');
  } else {
    col.style.opacity = '0';
    digit3.children[0].innerText = 'EXPAND HERE';
    col.style.transition = 'all .5s ease-in-out';
    col.style.transition = '-webkit-transition: all .2s ease-in-out';
    col.style.transition = '-moz-transition: all .2s ease-in-out';
    col.style.transition = '-ms-transition: all .2s ease-in-out';
    col.style.transition = '-o-transition: all .2s ease-in-out';
    col.style.maxHeight = '0px';
    e.target.classList.remove('fa-chevron-up');
    e.target.classList.add('fa-chevron-down');
  }
}

fas.addEventListener('click', collapsable);

.fas {
 margin-left: 3px;
}



[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" />



      

  
    
    
    
    
  
  
    
      First
      Second
      Third
      Four
      TITLE
    
  
  
    
      COLLAPSE HERE 
      
      
      
      Online Stores
    
  
  
    
        1
        2
        3
        4
        Retail
      
      
        1
        2
        3 
        4
        Appointment
      
      
        1
        2
        3
        4
        Orders

Respondida el Dec 17, 2020 a las 02:21 - por quantumquill

Gpt · Answer

El problema principal en tu código es que estás mezclando un

dentro de un , lo cual no es válido en HTML. Para lograr el efecto deseado con el collapsible en tu tabla, debes usar la estructura adecuada para que funcione correctamente. Aquí te dejo un ejemplo de cómo podrías modificar tu código para obtener el resultado esperado: html First Second Third Four TITLE COLLAPSE HERE Online Stores 1 2 3 4 Retail 1 2 3 4 Appointment 1 2 3 4 Orders En este código, se han realizado las siguientes modificaciones: Se ha agregado el atributo `data-bs-target` al primer `` para indicar el elemento sobre el cual se realizará el collapsible. Se han modificado las filas de la tabla que se desean ocultar/agregar, para que todas tengan la clase `collapse` y un identificador único. Con estos cambios, el collapsible debería funcionar correctamente en tu tabla.

Gemini · Answer

Para crear un panel plegable dentro de una tabla de arranque, puedes seguir estos pasos:

HTML:

En la primera celda de la primera fila (donde dice "COLLAPSE HERE"), agrega un botón para alternar el estado de visualización del panel plegable. Puedes usar un botón de arranque o un simple enlace:

html
COLLAPSE HERE

Agrega un `div` con la clase `collapse` y un ID único (por ejemplo, `collapseExample`) que contenga las filas que se deben mostrar u ocultar al hacer clic en el botón.

html

    
        1
        2
        3
        4
        Retail
    
    
        1
        2
        3
        4
        Appointment
    
    
        1
        2
        3
        4
        Orders

JavaScript:

No se requiere JavaScript para este ejemplo, ya que Bootstrap maneja el comportamiento de alternancia del panel plegable.

Explicación:

El botón data-bs-target="<h18>collapseExample" vincula el botón con el div que debe alternar. La clase collapse oculta inicialmente el div por defecto. Al hacer clic en el botón, Bootstrap agrega la clase show al div collapse, mostrándolo.

Resultado:*

Al hacer clic en el botón "COLLAPSE HERE", el panel plegable se expandirá y mostrará las filas ocultas.

Respondida el Dec 18, 2020 a las 02:28 - por Gemini

First	Second	Third	Four	TITLE
COLLAPSE HERE				Online Stores
1	2	3	4	Retail
1	2	3	4	Appointment
1	2	3	4	Orders

Terciopelo plegable dentro de la mesa de arranque

3 Respuestas: