title: Cant get my Javascript to work in Joomla
body: <p>I am having trouble getting this Javascript code to work inside my Joomla template and I cannot figure out what I am doing wrong.  Please help.</p>
  
  <p>This is the script tag im trying to reference in the 'head':</p>
  
  <pre><code>&lt;script type="text/javascript" src="&lt;?php echo $this-&gt;baseurl ?&gt;/templates/&lt;?php echo $this-&gt;template; ?&gt;/javascript/responsive_menu.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>This is the main menu im adjusting in the 'html':</p>
  
  <pre><code>&lt;nav class="nav"&gt;
      &lt;div data-state="closed" class="navigation"&gt;
          &lt;a href="#" class="nav__toggle"&gt;&lt;/a&gt;
          &lt;img src="&lt;?php echo $this-&gt;baseurl; ?&gt;/templates/&lt;?php echo $this-&gt;template; ?&gt;/images/arrow.png" alt="" class="arrow" /&gt;
          &lt;jdoc:include type="modules" name="top" /&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>This is the 'css' im trying to affect:</p>
  
  <pre><code>.navigation[data-state=closed] {
      min-height: 0;
      height: 70px;
      overflow: hidden;
  }
  
  .navigation[data-state=open] {
      height: 290px;
      -webkit-transition: height ease-out 1s;
      -moz-transition: height ease-out 1s;
      -o-transition: height ease-out 1s;
      transition: height ease-out 1s;
  }
  </code></pre>
  
  <p>And here is my Javascript inside the '.js':</p>
  
  <pre><code>(function () {
  
  var nav = document.querySelector('.nav__toggle');
  var toggleState = function (elem, one, two) {
      var elem = document.querySelector(elem);
      elem.setAttribute('data-state', elem.getAttribute('data-state') === one ? two : one);
  };
  
  nav.onclick = function (e) {
      toggleState('.navigation', 'closed', 'open');
      e.preventDefault();
  };
  
  // ES5
  // nav.addEventListener('click', toggleState.bind(null, '.nav ul', 'closed', 'open'), false);
  
  })();
  </code></pre>
  
  <p>I will use another solution for now but I cannot figure out why this is not working.</p>
  
  <p>Please help.</p>