0

Descargué un ejemplo de la página w3schools de como hacer un ejemplo de pagina tipo acordeón colapsable.

Este es el enlace:

https://www.w3schools.com/howto/howto_js_accordion.asp

Y funciona en su página, al exportarlo a mi código en Ruby on Rails, no se despliega el acordeón, sé algo muy básico de javascritps y me doy cuenta que hay problemas con la variable "acc", pero hasta ahí mi conocimientos.

Alguna idea??? de antemano Muchas Gracias!!!

Adjunto los códigos, el html, funciona, la hoja de estilo funciona, el problema es el javascript.

HTML: OK

<h3>Preguntas Frecuentes</h3>


<p>In this example we have added a "plus" sign to each button. When the user clicks on the button, the "plus" sign is replaced with a "minus" sign.</p>
<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

stylesheet: OK

button.accordion {
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    transition: 0.4s;
}

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

button.accordion:after {
    content: '\002B';
    color: #777;
    font-weight: bold;
    float: right;
    margin-left: 5px;
}

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

div.panel {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s ease-out;
}

javascript: (código con problema en rails)

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].onclick = function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  }
}

El código javascript lo llamo desde la estructura de carpeta de RoR en /app/javascript/application.js, dentro de la carpeta javascript tengo el archivo preguntas_frecuentes.js. El código javascript de application.js es:

//= require jquery2
//= require jquery_ujs
//= require bootstrap-sprockets
//= require cable
//= require turbolinks
//= require preguntas_frecuentes
//= require_tree .
5
  • El código funciona perfectamente, seguramente el error esta en que el código javascript se debe estar ejecutando antes de que se cargue el HTML. ¿Podrías indicar como y donde cargas el JS?
    – Marcos
    el 1 dic. 2017 a las 13:16
  • el código lo llamo desde /app/javascripts/application.js, y este es el ejemplo: //= require jquery2 //= require jquery_ujs //= require bootstrap-sprockets //= require cable //= require turbolinks //= require preguntas_frecuentes //= require_tree . Como puedo llamarlo para que se ejecuta despues que se cargue el html?
    – Developer
    el 1 dic. 2017 a las 13:19
  • lo voy a actualizar en la pregunta.
    – Developer
    el 1 dic. 2017 a las 13:22
  • El archivo /app/javascripts/application.js, ¿en que punto se incluye en el documento? En teoría cargarlo justo al final.
    – Marcos
    el 1 dic. 2017 a las 13:25
  • Lo puse en la ultima linea y nada.
    – Developer
    el 1 dic. 2017 a las 13:29

1 respuesta 1

0

Tenés que ejecutar el código dentro del evento document ready. Usando JQuery:

$(function() {

    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].onclick = function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight){
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      }
    }
})

Por otro lado, este código se va a ejecutar en todas las páginas de Rails. Para evitar el problema puedes agregar lo siguiente:

var acc = document.getElementsByClassName("accordion");
if (acc.length == 0) return; 

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.