http://jsfiddle.net/nastysloper/qYwV7/ Toggle photo information

gistfile1.txt

$(document).ready(function() { 

  $('#tour').on('click', 'button', function() { 
    $('.photos').slideToggle();
  });

  function showPhotos() {
    $(this).find('span').slideToggle();
  }
  
  $('.photos').on('mouseenter', 'li', showPhotos).on('mouseleave', 'li', showPhotos);
    
});

gistfile2.txt

span {
    display: none;
}

index.html

<div id='tour'>
  <h2>Paris, France Tour</h2>
  <p>$2,499 for 7 Nights</p>
  <button>See photos from our last tour</button>
  <ul class='photos'>
    <li>
      <img src="/assets/photos/paris1.jpg" />
      <span>Arc de Triomphe</span>
    </li>
    <li>
      <img src="/assets/photos/paris2.jpg" />
      <span>The Eiffel Tower</span>
    </li>
    <li>
      <img src="/assets/photos/paris3.jpg" />
      <span>Notre Dame de Paris</span>
    </li>
  </ul>
</div>