Navbar won't collapse Bootstrap v4.0.0-alpha.5 - php

Question

I'm working on a site with php header & footer in the html version works like a charmin but in the php the navbar don't return.
Here is my code header:
<div class="container">
<div class="row">
<div class="col-sm-3">
<div id="logo" class="float-xs-left">
<a class="navbar-brand" href="xxxxxxx/"><img src="img/logo-white.png" /></a>
</div>
</div>
<!--div class="col-sm-6" -->
<div class="float-xs-right">
<!--/div> -->
<!--cols:12 -->
<!--cols:12 -->
<div class="offcanvas">
<div class="navbar yamm col-lg-8 col-md-8 col-sm-6 ">
<div class="navbar-header">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".offcanvas.menu">
<i class="fa fa-bars"></i>
<div class="line line-1"></div>
<div class="line line-2"></div>
<div class="line line-3"></div>
</button>
</div>
<!-- outside -->
<div class="offcanvas menu right">
<div class="navbar-collapse collapse">
<button data-target=".offcanvas.menu" data-toggle="collapse" class="navbar-toggle" type="button">
</button>
<div class="nav navbar-nav">
<div class="list-group">
<!-- li><span class="home">⌂</span></li -->
<img class="logo-img" src="img/logo-full.png" class="img-responsive" />
INICIO
home <b class="fa fa-chevron-down"></b>
<div class="collapse" id="p5">
<a href="page-1.php" class="list-group-item">
Espresso </a>
<a href="page-2.php" class="list-group-item">
Clásico </a>
<a href="page-3.php" class="list-group-item">
Orgánico </a>
<a href="page-4.php" class="list-group-item">
Descafeinado </a>
<a href="page-5.php" class="list-group-item">
Toscana </a>
</div>
<b class="fa fa-chevron-down"></b>
<div class="collapse" id="p6">
<a href="page-11.php" class="list-group-item">
</a>
</div>
<b class="fa fa-chevron-down"></b>
<div class="collapse" id="p4">
<a href="page-13.php" class="list-group-item">
item </a>
<a href="#c1" class="list-group-item" data-toggle="collapse">
another one<b class="fa fa-chevron-down"></b> <span class="cat_url" onclick="location.href='other.php'"><i class="fa fa-mail-forward"></i></span> </a>
<div class="collapse" id="c1">
name
name
name
name
name
</div>
<a href="#" class="list-group-item">
other page </a>
<a href="#" class="list-group-item">
other page </a>
<a href="#" class="list-group-item">
other page </a>
<a href="page-15.php" class="list-group-item">
other name </a>
<a href="page.php" class="list-group-item">
name </a>
<a href="page.php" class="list-group-item">
name </a>
<a href="#" class="list-group-item">
name </a>
</div>
page title <b class="fa fa-chevron-down"></b>
<div class="collapse" id="p7">
<a href="page-16.php" class="list-group-item">
Name </a>
<a href="page-17.php" class="list-group-item">
name </a>
</div>
page
</div>
<br/>
</div>
</div>
</div>
<!-- /.navbar-collapse -->
</div>
<div class="pusher"></div>
<!-- end outside -->
</div>
</div>
</div>
<!--cols:12 -->
<div class="navbar yamm ">
<div class="navbar-header hidden-lg-up">
<button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="navbar-toggleable-md collapse">
<ul class="nav navbar-nav">
<!-- li><span class="home">⌂</span></li -->
<li class="nav-item ">
<a href="contacto.php" >Contáctanos</a>
</li>
<li class="nav-item ">
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
</div>
</div>
</div>
</header>
In the console get this error:
document.querySelector( "#nav-toggle" )
.addEventListener( "click", function() {
this.classList.toggle( "active" );
});
Does anybody know what the problem is and how I can fix it?
Solved
The issue was in the footer header and pages calling the same file so when the function is called the state doesn't return because repeat the action 3 times

Answer 1

Finally resolve the issue, there was a triple script sentence in the header, footer and index, was erased in the header and the footer and that's it.