slideToggle

HTML

<div id="images-block">

    <!-- Button to Click -->
    <a href="#" id="toggle">
      <img src="http://lifewithaminipig.com/wp-content/uploads/2016/02/DSC_2604-1024x757.jpg"/>
    </a>

    <!-- Panel that slides open -->
    <div id="show-images">
      <img src="http://lifewithaminipig.com/wp-content/uploads/2016/02/DSC_2604-1024x757.jpg"/>
      <img src="http://lifewithaminipig.com/wp-content/uploads/2016/02/DSC_2604-1024x757.jpg"/>
      <img src="http://lifewithaminipig.com/wp-content/uploads/2016/02/DSC_2604-1024x757.jpg"/>
    </div>

</div>

CSS

#images-block {
display: block;
margin-left: auto;
margin-right: auto;
width: 150px;
}

/*Panel that slides open*/
#show-images
{
   display: none;
    color: #FFF;
    padding: 0;
    width: 150px;
    
}


/* All img */
img {
  height: auto;
  width: 150px;
  padding-top: 20px;
}


#toggle { 
filter: alpha(opacity=50);
    -webkit-transition: opacity 1s ease-in-out;
  -moz-transition: opacity 1s ease-in-out;
  -ms-transition: opacity 1s ease-in-out;
  -o-transition: opacity 1s ease-in-out;
  transition: opacity 1s ease-in-out;
  }

.fade {
  opacity: 0.3;
  }

JavaScript

$(function()
  {
     $("a#toggle").click(function()
          {
           $("#show-images").slideToggle(800);
           $("#toggle").toggleClass("fade");
            return false;
            });
  });