hyperlink - Jquery animation not working after clicking link -

i'm starting out jquery , love i've got problem can't wrap head around.

i've implemented plugin purchased which's creates grid of thumbs can filter on attributes. (trough li class)

in addition wrote little piece of code expands div on click. both works until menu used (to filter out attribute) understand may sound bit vague until see here's link: http://media-surfer.nl/test

if need code pasted here since it's quite lot figured best keep overview , visit link.

i life of me can't figure out, appreciated! ton in advance :)

here's code wrote:

<!-- collapse expand jquery --> <script type="text/javascript">      $(document).ready(function(){          $(".inhoud").hide();         $(".show_hide").show();          $('.show_hide').click(function(event) {               $(".inhoud").parent().animate({                 width: '160'             }, 500, function() {             // animation complete.           });          var $inhoud = $(this).next(".inhoud");          if($inhoud.hasclass("active"))          {             $(this).parent().animate({                 width: '160'               }, 500, function() {                 // animation complete.             });             $inhoud.removeclass("active");         } else {             $(this).parent().animate({                 width: '769'               }, 500, function() {                 // animation complete.             });             $inhoud.addclass("active");         }      });  });  </script>  <!-- collapse expand jquery --> 

sooo .. found bug on page ? :d

think i've used same sorting plugin once , doing creating new collection of elements (matching sorting criteria) animated. guess exact reason breaks click functionality, since on document ready bind existing elements , sorting plugin generates new elements not have click event bound them. try using .on() replacing line:

$('.show_hide').click(function(event) {  

with

$(document).on('click','.show_hide', function(event) {