Accordion text effect is not working in a simple html page using JavaScript
<p>I'm trying to implement this <a href="http://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion_symbol" rel="nofollow">simple text accordion effect</a> but it's not working...I can't find why...If I create a simple html page with the same code (copy &amp; paste) it's working but if I try to implement this accordion effect to another html page with previous content (a simple html menu and some JavaScript variables), when I click on the button...nothing changes!! So...the effect is not working...and I can't find the reason.</p>

<p>Here is my code:</p>

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" lang="es-es"&gt;
&lt;link rel="stylesheet" href="css/layout.css" type="text/css" media="screen"&gt;
&lt;link rel="stylesheet" href="css/menu.css" type="text/css" media="screen"&gt;
&lt;link rel="stylesheet" href="css/accordion.css" type="text/css" media="screen"&gt;


&lt;script&gt;

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

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

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

&lt;/head&gt;
&lt;body&gt;

    &lt;div id="mainArea"&gt; 
            &lt;button class="accordion"&gt;Section 1&lt;/button&gt;
            &lt;div class="panelacc"&gt;
            &lt;p&gt;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.&lt;/p&gt;
            &lt;/div&gt;

            &lt;button class="accordion"&gt;Section 2&lt;/button&gt;
            &lt;div class="panelacc"&gt;
            &lt;p&gt;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.&lt;/p&gt;
            &lt;/div&gt;

            &lt;button class="accordion"&gt;Section 3&lt;/button&gt;
            &lt;div id="foo" class="panelacc"&gt;
            &lt;p&gt;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.&lt;/p&gt;
            &lt;/div&gt;
    &lt;/div&gt;

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

<p>menu.css, accordion.css and layout.css (all together):</p>

<pre><code>*{
    margin:0;
    padding:0;
}

body {
    background-color:#bababa;
    color:#fff;
}

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

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;  
}
</code></pre>

<p>Thanks in advance</p>