0

comunidad! Estoy teniendo problemas con un accordion usando jQuery.

Si solo tengo una sola instancia del elemento en el DOM funciona bien. Pero si tengo más de una instancia no.

Lo que sucede es que si hago click para expandir el accordion, el código se ejecuta la cantidad de veces que el elemento existe en el DOM. Es decir, si tengo dos instancias, el código corre 2 veces. Y así sucesivamente.

El código de ejemplo esta disponible en: https://codepen.io/jonhyleo/pen/BaLaRqg

Si alguien me puede dar una mano, lo agradecería mucho.

3 respuestas 3

1

Esta parte:

 $(".panel-title").on("click", function (e) {

Se esta ejecutando por cada Accordion (objeto) que tienes, en tu caso son dos elementos Accordion <div class="accordion"> , cuando pasa la primera vez efectivamente abre, pero al ejecutarse una segunda vez, y verificar que esta abierto, lo cierra de nuevo.

Solo tienes que mover el código y quitar la function setup:

$(function () {
  var Accordion = function (element) {
    this.$ctx = $(element);
    //this.setup();
  };

 
  function close_section() {
    $(".panel-title").removeClass("active");
    $(".panel-content").removeClass("open").slideUp(350);
  }

  $(".accordion").each(function () {
    new Accordion(this);
  });
  
  
  
   $(".panel-title").on("click", function (e) {
          var currentPanel = $(this)[0].nextElementSibling;
          debugger;
          if ($(e.target).is(".active")) {
            console.log('close');
            close_section();
          } else {
            close_section();
            console.log('open');
            $(this).addClass("active");

            $(currentPanel).slideDown(350).addClass("open");
          }
      });
});
0

En el ejemplo solo tienes una instancia que es esta: new Accordion(this); Podrias colocar un ejemplo con las 2 instancias para observar el tipo de error? otra cosa es mucho mejor si aumentas los valores de Slidedown y Slideup mejora la parte de velocidad rápida!

0

Si estás usando la librería jquery UI lo recomendable es usar las opciones que proporciona: jqueryUI

$( function() {
    $( ".accordion" ).accordion({collapsible: true, active: false});
  } );
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5vAw.ttf) format('truetype');
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Me5Q.ttf) format('truetype');
}
/* Accordion */
.accordion,
.accordion * {
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  font-family: "Roboto", sans-serif;
}
.accordion {
  overflow: hidden;
  max-width: 80%;
  display: block;
  margin: 2rem auto;
}
.accordion .panel-title {
  text-decoration: none;
  display: inline-block;
  border-bottom: 1px solid #1a1a1a;
  width: 100%;
  padding: 15px;
  transition: all linear 0.15s;
  color: black;
  font-size: 1rem;
  cursor: pointer;
}
@media screen and (min-width: 768px) {
  .accordion .panel-title {
    font-size: 1.125rem;
  }
}
.accordion .panel-title.active,
.accordion .panel-title:hover {
  color: goldenrod;
  background: rgba(0, 0, 0, 0.1);
}
.accordion .panel-title:after {
  /* Unicode character for "plus" sign (+) */
  content: "\02795";
  font-size: 13px;
  color: #fff;
  float: right;
  margin-left: 5px;
}
.accordion .panel-title.active:after {
  /* Unicode character for "minus" sign (-) */
  content: "\2796";
}
.accordion .panel-title:last-child,
.accordion .panel-title:last-of-type {
  border-bottom: none !important;
}
.accordion .panel-content {
  display: none;
  padding: 20px;
  background: rgba(0, 0, 0, 0.05);
}
.accordion .panel-content-edit {
  padding: 20px;
}
.accordion .panel-content-edit img {
  max-width: 100%;
  min-width: 100%;
}
.accordion .panel-content-edit p {
  margin-bottom: 1rem;
}
.accordion .panel-content-edit ul,
.accordion .panel-content-edit ol {
  padding-left: 2.5rem;
}
.accordion .panel-content img {
  max-width: 100%;
  min-width: 100%;
}
.accordion .panel-content p {
  margin-bottom: 1rem;
}
.accordion .panel-content ul,
.accordion .panel-content ol {
  padding-left: 2.5rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="accordion">
  <div class="panel-title">Panel 1</div>
  <div class="panel-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</p>
  </div>
  <div class="panel-title">
    Panel 2
  </div>
  <div class="panel-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</p>
  </div>
</div>
<div class="accordion">
  <div class="panel-title">Panel 1</div>
  <div class="panel-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</p>
  </div>
  <div class="panel-title">
    Panel 2
  </div>
  <div class="panel-content">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perspiciatis necessitatibus molestias rerum nisi, soluta dicta reprehenderit cupiditate excepturi odio doloribus consectetur maxime, expedita vel qui pariatur ex fugit? Praesentium, deleniti!</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.