Simple toggle-function for photos

This codeblock is used for showing and hiding photos when a button in #mydiv is clicked.
When the photos are showing and you hover your mouse over them a span-tag is showing.

Both the span and .photos got the display:none; rule active in the CSS.

$(document).ready(function() {
  $('#mydiv').on('click', 'button', function() {
    $('.photos').slideToggle();
  });
  function togglePhotos() {
    $(this).find('span').slideToggle();
  }
  $('.photos').on('mouseenter', 'li', togglePhotos);
  $('.photos').on('mouseleave', 'li', togglePhotos);
});