Click doesn't work after AJAX load - jQuery | Example data

fiddle.css

.category-item-content {
  display: none;
}

/* Demo blog styles */
body{
  background:#f5f2f0;
  padding:1px 15px;
  font-family:"SF Mono", "Monaco", "Andale Mono", "Lucida Console", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
  font-size:14px;
}
.info-wrapper{
  font-size:12px;
  border-top:1px solid rgba(0,0,0,0.1);
  padding-top:15px;
}

fiddle.html

<h3>Load a category and check if "Expand" still works.<br><small>Hint: It won't</small></h3>
<a href="/gh/gist/response.html/be39abdfde2ed96f11d115491ea32cbe/" id="category-nav">Get category via AJAX</a>
<div id="category-wrapper">
  <h2>Category</h2>
  <div class="category-item">
    <p>This is title <a href="#" class="toggle-item">Expand</a></p>
    <div class="category-item-content">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    </div>
  </div>
</div>
<p class="info-wrapper">This is an example data to show you the problem. When you first load this page everything works fine. But when you load category via ajax the toggle stops working.</p>

fiddle.js

$(function() {

  /* Ajax navigation */
  $('#category-nav').click(function(e) {
    e.preventDefault();
    $('#category-wrapper').load($(this).attr('href'));
  });
  
  /* Toggle category item */
  $('.toggle-item').click(function(e) {
    e.preventDefault();
    $(this).parent().next('.category-item-content').toggle();
  });
  
});

fiddle.manifest

name: Click doesn't work after AJAX load - jQuery
description: This is an example data for 
authors:
  - Eliza Witkowska
normalize_css: no
lang_css: CSS

fiddle.response.html

<h2>Category From AJAX</h2>
<div class="category-item">
  <p>This is title in category loaded via AJAX <a href="#" class="toggle-item">Expand</a></p>
  <div class="category-item-content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</div>