cuando colapsa un accordion de bootsrap cambiar el tamaño de un div in javascript

En Bootstrap, cuando colapsa o se expande un accordion, se dispara un evento específico. Puedes agregar un listener para ese evento y luego cambiar el tamaño del div que desees mediante la manipulación del DOM en Javascript.

Aquí hay un ejemplo de cómo hacerlo:

Primero, define tu accordion de bootstrap con los paneles colapsables y agrega un id único al div que deseas cambiar de tamaño:

<div id="miDiv" class="container">
  <div class="accordion" id="miAccordion">
    <div class="card">
      <div class="card-header" id="headingOne">
        <h5 class="mb-0">
          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            Panel 1
          </button>
        </h5>
      </div>

      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#miAccordion">
        <div class="card-body">
          Contenido del panel 1
        </div>
      </div>
    </div>

    <div class="card">
      <div class="card-header" id="headingTwo">
        <h5 class="mb-0">
          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
            Panel 2
          </button>
        </h5>
      </div>
      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#miAccordion">
        <div class="card-body">
          Contenido del panel 2
        </div>
      </div>
    </div>

  </div>
</div>

1129 chars
36 lines

Luego, agrega un listener de eventos para el evento show.bs.collapse que se dispara cuando un panel colapsable se expande. En el manejador de eventos, puedes cambiar el tamaño del div que deseas manipular mediante la selección del elemento utilizando el id.

index.tsx
document.addEventListener('DOMContentLoaded', function () {
  var miAccordion = document.getElementById('miAccordion')

  miAccordion.addEventListener('show.bs.collapse', function (event) {
    var panelId = event.target.parentElement.parentElement.parentElement.id
    if (panelId === 'miAccordion') {
      var miDiv = document.getElementById('miDiv')
      miDiv.style.height = '500px'
    }
  })
})

403 chars
12 lines

Aquí, estamos agregando un manejador de eventos para el evento show.bs.collapse. Cuando este evento se dispara, usamos event.target para obtener la referencia al elemento que ha desencadenado el evento. Luego, subimos en la cadena de padres del elemento para obtener el id del panel que se ha expandido, y comparamos para asegurarnos de que es nuestro propio accordion.

En el bloque if, seleccionamos el div que deseamos manipular mediante el id y cambiamos su altura a 500px como ejemplo. Puedes cambiar el valor para adaptarlo a tus necesidades.

Recuerda agregar el atributo defer al cargar el archivo Javascript en tu HTML para asegurarte de que se cargue después de que se haya cargado el DOM:

<script src="miScript.js" defer></script>

42 chars
2 lines

similar javascript code snippets

how to change the border of an element in javascript
how to get an element by data attribute in javascript
how to check if an element has a class in javascript
how to toggle a class on an element in javascript
how to get an element by tag name in javascript
how to remove a class from an element in javascript
scroll snap in javascript
select an element by attribute in javascript
how to get an element by attribute in javascript
how to add a tree in javascript

related categories

javascript
bootstrap
dom-manipulation

gistlibby LogSnag