title: How do I properly format a .js file with JavaScript and jQuery?
body: <p>I am new to implementing JavaScript and jQuery into my website and am having trouble with how to format the code. The code I'm using each works separately but when I combine the following code together in one .js document the second part of the code (slides) doesn't work. What am I doing wrong? EDIT: It's the slideshow that won't work.</p>
  
  <p>Thanks.</p>
  
  <p>This is for one element:</p>
  
  <pre><code>$(document).ready(function() {
  $('#nav-icon4').click(function() {
  $(this).toggleClass('open');
  $(".menu").slideToggle();
    });
  });
  </code></pre>
  
  <p>This is for another element on the same page:</p>
  
  <pre><code>var slides = document.querySelectorAll('#slides .slide');
  var currentSlide = 0;
  var slideInterval = setInterval(nextSlide,2000);
  
  function nextSlide() {
  slides[currentSlide].className = 'slide';
  currentSlide = (currentSlide+1)%slides.length;
  slides[currentSlide].className = 'slide showing';
  } 
  </code></pre>
  
  <p>HTML: </p>
  
  <p>In the head section I put: </p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script type="text/javascript" src="scripts/scripts.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Body:</p>
  
  <pre><code>&lt;ul id="slides"&gt;
     &lt;li class="slide showing"&gt;&lt;img src="images/run1.jpg" alt="run" class="show"/&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="images/oregonpin.jpg" alt="oregon pin on map" class="show" /&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="images/shortswim.jpg" alt="swim" class="show" /&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="images/cycle1.jpg" alt="bike" class="show" /&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="images/run2.jpg" alt="run" class="show"/&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="images/run3.jpg" alt="run" class="show"/&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="images/cycle2.jpg" alt="bike" class="show"/&gt;&lt;/li&gt;
  &lt;li class="slide"&gt;&lt;img src="images/swim1.jpg" alt="swim" class="show"/&gt;&lt;/li&gt;
    &lt;/ul&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>#slides {
  position: relative;
  height: 300px;
  padding: 0px;
  margin: 0px;
  list-style-type: none;
  }
  .slide {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 90%;
  height: 100%;
  opacity: 0;
  z-index: 1;
  
  -webkit-transition: opacity 1s;
  -moz-transition: opacity 1s;
  -o-transition: opacity 1s;
  transition: opacity 1s;
  }
  
  .showing {
  opacity: 1;
  z-index: -1;
  }
  .slide {
  font-size: 40px;
  padding: 40px;
  box-sizing: border-box;
  background: #333;
  color: #fff;
  }
  .show {
  height: 80%;
  width: 100%;
  } 
  </code></pre>