1

Estoy intentando implementar el efecto de texto 'acordeon' en un documento html pero no funciona, algo bloquea el evento y todavía no sé el qué.

Si copio y pego el código de ejemplo de aquí en un documento html en blanco, funciona todo perfectamente...pero si intento integrar ese código en mi documento al hacer click en el boton no se desplega.

La lógica es la siguiente: Des de una página A almaceno una variable storedText utilizando localStorage, en la página B recupero el valor de esa variable (array de texto) y lo vuelvo a tener en un array almacenado. Lo que quiero hacer es mostrar ese texto recuperado en forma de lista usando el efecto acordeon para organizar mejor el texto, pero el efecto acordeon no me funciona...ni ningún código JavaScript.

Utilizando JavaScript dentro del propio documento HTML me funciona alguna cosa, pero no todo junto...ya he probado varias alternativas pero no consigo que funcione todo.

código de la página B:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es">
<link rel="stylesheet" href="css/layout.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/menu.css" type="text/css" media="screen">
<link rel="stylesheet" href="css/accordion.css" type="text/css" media="screen">
<script src="myscripts.js"></script> 



</head>
<body>
    <!--Añadimos al area principal el efecto acordeon con el texto -->
    <div id="mainArea"> 
            <button class="accordion">Section 1</button>
            <div id="placeholder" class="panelacc"></div>

            <button class="accordion">Section 2</button>
            <div class="panelacc">
            <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 3</button>
            <div id="foo" class="panelacc">
            <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>
    </div>

    <!-- MENU -->
    <div class="container">
            <ul id="nav">
                <li><a href="#"><img src="images/t1.png" /> Dashboard</a></li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t2.png" />Reporting</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="llog.html"><img src="images/empty.gif" />LYNIS LOG</a></li>
                        <li><a href="#"><img src="images/empty.gif" />LYNIS REPORT</a></li>
                    </ul>
                </li>
                <li><a href="#" class="sub" tabindex="1"><img src="images/t3.png" />Lynis Tests</a><img src="images/up.gif" alt="" />
                    <ul>
                        <li><a href="#"><img src="images/empty.gif" />Accounting</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Authentication</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Banner</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Boot</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Crypto</a></li>
                        <li><a href="#"><img src="images/empty.gif" />File Integrity</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Firewall</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Hardening</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Kernel</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Logging</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Mail</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Malware</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Nameservers</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Networking</a></li>
                        <li><a href="#"><img src="images/empty.gif" />PHP</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Printing</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Processes</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Shell</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Software</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Squid</a></li>
                        <li><a href="#"><img src="images/empty.gif" />SSH</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Storage</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Time</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Tooling</a></li>
                        <li><a href="#"><img src="images/empty.gif" />Web</a></li>
                    </ul>
                </li>
                <li><a href="#"><img src="images/t2.png" />Overview</a></li>
            </ul>
    </div>
    <!-- END MENU -->

</body>
</html>

Código javascript:

/*Recuperamos la variable almacenada en local storage y una vez guardado en una variable vaciamos el contenido de localstorage */
var textRecovered = localStorage.getItem("storedText");
var lines = textRecovered.split("\n");
window.localStorage.clear();
for (var i = 0; i < lines.length; i++) {
    console.log(lines[i]);
}

/* Script que nos permite gestionar los eventos para el texto en forma de acordeon */


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

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

// selects the div with an id of placeholder
var div = document.getElementById('placeholder');


var fruits = ['I want a link <a href="http://google.com">here</a>','I want a link here','I want a link here','I want a link here','I want a link here'],
    ul = document.createElement('ul'); // create an arbitrary ul element

// loop through the fruits array
for(var i in fruits) {
        // create an arbitrary li element
    var li = document.createElement('li'),
         content = document.createTextNode(fruits[i]); // create a textnode to the document
         var link = "http://google.com";
         var element = document.createElement("span");
         element.innerHTML = fruits[i];
  li.appendChild(element); // append the created textnode above to the li element
  ul.appendChild(li); // append the created li element above to the ul element
}
div.appendChild(ul); // finally the ul element to the div with an id of placeholder

Y todo el css que va asociado a los documentos (junto):

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: #ddd;
}

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

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

div.panelacc {
    padding: 0 18px;
    background-color: white;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
}

div.panelacc.show {
    opacity: 1;
    max-height: 500px;  
}

div.panelacc.show p {
  color: black;
}

*{
    margin:0;
    padding:0;
}

body {
    background-color:#bababa;
}

div#fileOutput{
    margin: auto;
    margin-top: 50px;
    margin-left: 250px;
    margin-right: 50px;
    margin-bottom: 50px;
    width: 960px;
    height: 800px;
    white-space: pre-line;
    border: solid 1px black;
    padding: 5px;
}

input[type="file"]{
    margin: auto;
    width: 960px;
    height: 50px;
    margin-left: 250px;
    white-space: pre-line;
    border: solid 1px black;
    padding: 5px;

}


div#mainArea{
    margin: auto;
    margin-top: 50px;
    margin-left: 250px;
    margin-right: 50px;
    margin-bottom: 50px;
    width: 960px;
    height: 800px;
    white-space: pre-line;
    border: solid 1px black;
    padding: 5px;
}

#nav {
    border:3px solid #3e4547;
    box-shadow:2px 2px 8px #000000;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    position: fixed;
    top: 0; left: 0;
}
#nav, #nav ul {
    list-style:none;
    padding:0;
    width:200px;
}
#nav ul {
    position:relative;
    z-index:-1;
}
#nav li {
    position:relative;
    z-index:100;
}
#nav ul li {
    margin-top:-23px;

    -moz-transition:  0.4s linear 0.4s;
    -ms-transition: 0.4s linear 0.4s;
    -o-transition: 0.4s linear 0.4s;
    -webkit-transition: 0.4s linear 0.4s;
    transition: 0.4s linear 0.4s;
}
#nav li a {
    background-color:#d4d5d8;
    color:#000;
    display:block;
    font-size:12px;
    font-weight:bold;
    line-height:28px;
    outline:0;
    padding-left:15px;
    text-decoration:none;
}
#nav li a.sub {
    background:#d4d5d8 url("../images/down.gif") no-repeat;
}
#nav li a + img {
    cursor:pointer;
    display:none;
    height:28px;
    left:0;
    position:absolute;
    top:0;
    width:200px;
}
#nav li a img {
    border-width:0px;
    height:24px;
    line-height:28px;
    margin-right:8px;
    vertical-align:middle;
    width:24px;
}
#nav li a:hover {
    background-color:#bcbdc1;
}
#nav ul li a {
    background-color:#eee;
    border-bottom:1px solid #ccc;
    color:#000;
    font-size:11px;
    line-height:22px;
}
#nav ul li a:hover {
    background-color:#ddd;
    color:#444;
}
#nav ul li a img {
    background: url("../images/bulb.png") no-repeat;
    border-width:0px;
    height:16px;
    line-height:22px;
    margin-right:5px;
    vertical-align:middle;
    width:16px;
}
#nav ul li:nth-child(odd) a img {
    background:url("../images/bulb2.png") no-repeat;
}
#nav a.sub:focus {
    background:#bcbdc1;
    outline:0;
}
#nav a:focus ~ ul li {
    margin-top:0;

    -moz-transition:  0.4s linear;
    -ms-transition: 0.4s linear;
    -o-transition: 0.4s linears;
    -webkit-transition: 0.4s linears;
    transition: 0.4s linear;
}
#nav a:focus + img, #nav a:active + img {
    display:block;
}
#nav a.sub:active {
    background:#bcbdc1;
    outline:0;
}
#nav a:active ~ ul li {
    margin-top:0;
}
#nav ul:hover li {
    margin-top:0;
}

1 respuesta 1

1

He conseguido replicar el problema copiando el código en local (no funciona en SO porque el código está sandboxed y localStorage no funciona).

El error está en la primera/segunda línea del código JavaScript. Lees un valor del localStorage pero no compruebas si existe o no. Si existe, perfecto; pero si el valor no existe, entonces el split fallará... y el JavaScript dejará de ejecutarse porque los navegadores dejan de ejecutar código cuando encuentran un fallo, y entonces no se ejecutará la parte relacionada con el acordeón.

La solución es sencilla: antes de hacer ninguna operación con un valor del localStorage, asegúrate de que existe, para ello añade una simple condición:

if (localStorage.getItem("storedText")) {
    var textRecovered = localStorage.getItem("storedText");
    var lines = textRecovered.split("\n");
    window.localStorage.clear();
    for (var i = 0; i < lines.length; i++) {
      console.log(lines[i]);
    }
}

En cuanto hice ese cambio (el resto del código se queda igual), el acordeón funcionaba sin problemas en mi local.

1
  • Así es, ya sabía yo que se trataba de un error absurdo de novato...en algunas zonas del código, por ejemplo, dentro del body, me iban ciertas partes del código JS, otras no...Tema resuelto, muchísimas gracias.
    – Cheknov
    el 16 abr. 2016 a las 11:12

Tu Respuesta

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

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