4

Necesito que cuando uno de los botones estén activos los demás se desactiven. ¿Qué me falta?¿Cómo podría hacerlo?

Éste es mi código hasta el momento (también disponible en CodePen):

var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");
  }

};
/* menu collapse */

.menu-collapse{
  margin: 60px 0;
}

button.accordion {
  background: none;
  border: none;
  border-top: 1px solid #e2e2e2;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  font-family: 'Montserrat', sans-serif;
}

button.accordion.active, button.accordion:hover {
  background-color: #f0f0f0;
}

button.accordion:after {
  content: '\02795';
  font-size: 14px;
  color: #777;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2796";
}

div.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease-in-out;
  opacity: 0;
}

div.panel.hide{
  overflow: hidden;
  opacity: 0;
}

div.panel.show {
  opacity: 1;
  max-height: 500px;
}
<div class="menu-collapse">

  <button class="accordion">New Students</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium dolorem, eos numquam quod. Doloribus minima excepturi cupiditate, laudantium est, nobis magni, sed illum labore nemo animi sunt tempora culpa ab. Dolor laudantium quia quibusdam ducimus, dicta maxime omnis repellendus distinctio tenetur hic quaerat debitis, sapiente quam id minima molestias rem.</p>
  </div>

  <button class="accordion">Readmissions</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero, soluta obcaecati provident voluptates sint molestias esse non, perspiciatis similique architecto repellat tempore molestiae dolores voluptate eos. Facilis fugiat, magnam molestiae aut, quae nobis ducimus animi quibusdam laborum voluptatibus labore.</p>
  </div>

  <button class="accordion">Transfers</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>
  <button class="accordion">Program Change</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>
  <button class="accordion">Professionals</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>

</div>

1 respuesta 1

1

Aquí te dejo una posibilidad. Lo que hace es que comprueba cuántos de los acordeones están activos: si no hay ninguno entonces se realiza la acción (que abrirá el acordeón pulsado); si hay uno, entonces se comprueba que es el mismo que se ha pulsado para que se realice la acción (cerrar el acordeón) y si no es el mismo entonces no se hace nada (porque ya hay otro abierto).

Éste es el código (sólo se han añadido las dos líneas de código comentadas):

var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){
 
    // obtener el número de acordeones abiertos
    var numActive = document.querySelectorAll(".accordion.active");
    // realizar la acción si no hay ninguno activo o si el activo es el pulsado
    if (numActive.length < 1 || numActive[0] == this) {
      this.classList.toggle("active");
      this.nextElementSibling.classList.toggle("show");
    }
  }

};
/* menu collapse */

.menu-collapse{
  margin: 60px 0;
}

button.accordion {
  background: none;
  border: none;
  border-top: 1px solid #e2e2e2;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  font-family: 'Montserrat', sans-serif;
}

button.accordion.active, button.accordion:hover {
  background-color: #f0f0f0;
}

button.accordion:after {
  content: '\02795';
  font-size: 14px;
  color: #777;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2796";
}

div.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease-in-out;
  opacity: 0;
}

div.panel.hide{
  overflow: hidden;
  opacity: 0;
}

div.panel.show {
  opacity: 1;
  max-height: 500px;
}
<div class="menu-collapse">

  <button class="accordion">New Students</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium dolorem, eos numquam quod. Doloribus minima excepturi cupiditate, laudantium est, nobis magni, sed illum labore nemo animi sunt tempora culpa ab. Dolor laudantium quia quibusdam ducimus, dicta maxime omnis repellendus distinctio tenetur hic quaerat debitis, sapiente quam id minima molestias rem.</p>
  </div>

  <button class="accordion">Readmissions</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero, soluta obcaecati provident voluptates sint molestias esse non, perspiciatis similique architecto repellat tempore molestiae dolores voluptate eos. Facilis fugiat, magnam molestiae aut, quae nobis ducimus animi quibusdam laborum voluptatibus labore.</p>
  </div>

  <button class="accordion">Transfers</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>
  <button class="accordion">Program Change</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>
  <button class="accordion">Professionals</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>

</div>


Ahora, si lo que quieres es que cuando se abra uno de los acordeones se cierren los otros (para que sólo haya como máximo uno abierto en un momento dado), lo único que tienes que hacer es un pequeño cambio: cuando compruebes si hay algún acordeón abierto Y no es el que se ha pulsado, entonces se cierra. El resto del código se mantendría igual.

Éste sería el código para eso:

var acc = document.getElementsByClassName("accordion");
for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function(){

    // obtener el número de acordeones abiertos
    var numActive = document.querySelectorAll(".accordion.active");
    // si hay alguno abierto Y no es el que se ha pulsado
    if (numActive.length == 1 && numActive[0] != this) {
      // lo cerramos
      numActive[0].classList.toggle("active");
      numActive[0].nextElementSibling.classList.toggle("show");
    }

    // esta parte sigue sin cambiar
    this.classList.toggle("active");
    this.nextElementSibling.classList.toggle("show");

  }

};
/* menu collapse */

.menu-collapse{
  margin: 60px 0;
}

button.accordion {
  background: none;
  border: none;
  border-top: 1px solid #e2e2e2;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  outline: none;
  font-size: 20px;
  transition: 0.4s;
  font-family: 'Montserrat', sans-serif;
}

button.accordion.active, button.accordion:hover {
  background-color: #f0f0f0;
}

button.accordion:after {
  content: '\02795';
  font-size: 14px;
  color: #777;
  float: right;
  margin-left: 5px;
}

button.accordion.active:after {
  content: "\2796";
}

div.panel {
  padding: 0 18px;
  max-height: 0;
  overflow: hidden;
  transition: 0.4s ease-in-out;
  opacity: 0;
}

div.panel.hide{
  overflow: hidden;
  opacity: 0;
}

div.panel.show {
  opacity: 1;
  max-height: 500px;
}
<div class="menu-collapse">

  <button class="accordion">New Students</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium dolorem, eos numquam quod. Doloribus minima excepturi cupiditate, laudantium est, nobis magni, sed illum labore nemo animi sunt tempora culpa ab. Dolor laudantium quia quibusdam ducimus, dicta maxime omnis repellendus distinctio tenetur hic quaerat debitis, sapiente quam id minima molestias rem.</p>
  </div>

  <button class="accordion">Readmissions</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta libero, soluta obcaecati provident voluptates sint molestias esse non, perspiciatis similique architecto repellat tempore molestiae dolores voluptate eos. Facilis fugiat, magnam molestiae aut, quae nobis ducimus animi quibusdam laborum voluptatibus labore.</p>
  </div>

  <button class="accordion">Transfers</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>
  <button class="accordion">Program Change</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>
  <button class="accordion">Professionals</button>
  <div class="panel">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eveniet consectetur non cumque facilis vel omnis, cupiditate? Deleniti vel culpa sint quibusdam dolore consequuntur atque est rerum architecto. Ratione mollitia consequuntur, nostrum architecto labore culpa nemo quasi deleniti, corporis enim eveniet libero quae aut velit nihil quia neque, optio praesentium asperiores esse laborum. Ab quis, rerum, autem dolor quam dolorem. Neque.</p>
  </div>

</div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.