title: How to change class of first element in Javascript array with jQuery?
body: <p>I want to create simple product slider with thumbnails. Although there may be more than 3 thumbnails, I want to show only 3 of them. By clicking 'more' button i am aiming to hide first image which is already visible and show one from hidden images by changing their class.</p>
  
  <p>Code works fine untill hiddenImages[0]. Firefox console gives the following error: "TypeError: hiddenImages[0] is undefined"</p>
  
  <p>What i am doing wrong?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>// All images
  var images = $('[data-image]');
  
  // Click for more images
  var more = $('.more');
  
  
  // Add show class to all images
  images.each(function(index, element){$(this).parent().addClass('visible')})
  
  // Hide images begining from 4th image
  images.each(function(index, element){if($(this).data('image') &gt;= 4)
  {$(this).parent().removeClass('visible').addClass('hidden')} })
  
  // Show big image when clicking thumbnail
  images.each( function(index, element){
  $(this).click(function(){ $('#pic img').attr('src', $(this).attr('src')) }) })
  
  
  // Hide 1st from visible images and show first from hidden images
  more.on('click', function(){
  // Find all hidden images and remove visible class from first one
  hiddenImages = images.hasClass('hidden');
  hiddenImages[0].removeClass('visible').addClass('hidden');
  })</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#pic {
    width: 300px;
    height: 300px;
    border: 1px solid  #ccc;
    margin-right: 5px;
    float: left;
  }
  
  .thumbnails {
    height: 300px;
    width: 50px;
    padding:0; 
    margin:0;
    margin-right: 10px;
    float: left;
  
  }
  
  .thumbnails li {
    display: inline;
    list-style: none;
    float: left;
    width: 70px;
    height: 70px;
    margin-bottom: 5px;
    border:1px solid #ccc;
    text-align: center;
  }
  
  .thumbnails li img {
    width: 70px;
    height: 70px;
    cursor: pointer;
  }
  
  .more {
    display: inline;
    list-style: none;
    float: left;
    width: 70px;
    height: 70px;
    margin-bottom: 5px;
    border:1px solid #ccc;
    text-align: center;
  }
  
  .hidden {display: none!important;} 
  
  .visible {display: block!important;}</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="holder"&gt;
   &lt;div id="pic"&gt;
   &lt;img src="https://placeimg.com/300/300/nature"&gt;
   &lt;/div&gt;
  
   &lt;ul class="thumbnails"&gt;
    &lt;li&gt;&lt;img data-image="1" src="https://placeimg.com/300/300/nature"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img data-image="2" src="https://placeimg.com/300/300/any"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img data-image="3" src="https://placeimg.com/300/300/animals"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img data-image="4" src="https://placeimg.com/300/300/sepia"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img data-image="5" src="https://placeimg.com/300/300/grayscale"&gt;&lt;/li&gt;
    &lt;li&gt;&lt;img data-image="6" src="https://placeimg.com/300/300/tech"&gt;&lt;/li&gt;
    &lt;li class="more"&gt;MORE&lt;/li&gt;
   &lt;/ul&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>