JavaSript code is not activated for the text effect 'accordion' in an html document

Question

JavaSript code is not activated for the text effect 'accordion' in an html document

Navigation

#1 by (0 votes)

1

I'm trying to implement the text effect 'accordion' in an html document but it does not work, something blocks the event and I still do not know what.

If I copy and paste the sample code from here into a blank html document, everything works perfectly ... but if I try to integrate that code in my document when I click on the button it does not unfold.

The logic is as follows: From a page A I store a variable storedText using localStorage, on page B I retrieve the value of that variable (text array) and return it to a stored array. What I want to do is show that recovered text in the form of a list using the accordion effect to better organize the text, but the accordion effect does not work ... or any JavaScript code.

Using JavaScript inside the HTML document itself, something works for me, but not all together ... I have already tried several alternatives but I can not get everything to work.

code on page 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>

Javascript code:

/*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

And all the css that is associated with the documents (together):

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: '795';
    font-size: 13px;
    color: #777;
    float: right;
    margin-left: 5px;
}

button.accordion.active:after {
    content: "96";
}

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;
}

javascript html5 html css3

asked by Gera 15.04.2016 в 18:15

source

1 answer

SVG image or PNG image create a dynamic array with the $ .map function in jquery

score 0 · Accepted Answer

I have managed to replicate the problem by copying the code locally (it does not work in OS because the code is sandboxed and localStorage does not work).

The error is in the first / second line of the JavaScript code. You read a value from the local Storage but you do not check if it exists or not. If it exists, perfect; but if the value does not exist, then the split will fail ... and the JavaScript will stop running because the browsers stop executing code when they find a fault, and then the part related to the accordion.

The solution is simple: before doing any operation with a value of the localStorage, make sure it exists, for this add a simple condition:

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]);
    }
}

As soon as I made that change (the rest of the code stays the same), the accordion worked without problems at my place.