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.
With the built in jQuery-functions stopPropagation() and preventDefault() you can avoid common bugs that happens thanks to default browser behaviour by passing a event parameter through the function and later call the functions on it like in the example.
If you want to reuse a function called showMaterial that both are used to show individual teddybears materials but now is going to be used for showing all teddybears materials, creating a custom event and then trigger it is a great way to do it.