title: Javascript: How to hide a div which is dynamically created?
body: <p>I'm creating a <code>div</code> dynamically using the following code:</p>
  
  <pre><code>$('#pageTabContent').append($('\
      &lt;div class="tab-pane" id="'+user_id+'"&gt;\
          &lt;div class="extras_area"&gt;\
              &lt;div class="expand_heading"&gt;Header to be clicked&lt;/div&gt;\
              &lt;div class="expandable_content"&gt;this should be expanded.&lt;/div&gt;\
          &lt;/div&gt;\
      &lt;/div&gt;'));
  </code></pre>
  
  <p>This is expanded within this HTML:</p>
  
  <pre><code>&lt;div id="right_column"&gt;
      &lt;ul id="pageTab" class="nav nav-tabs"&gt;&lt;/ul&gt;
      &lt;div id="pageTabContent" class="tab-content"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I now want to expand the <code>.expandable_content</code> when I click the <code>.expand_heading</code>. To do this, I'm trying something like this in my javascript:</p>
  
  <pre><code>$("#right-column").on("load", ".expand_heading", hide);
  $("#right-column").on("click", ".expand_heading", function(){
      $(this).next(".expandable_content").slideToggle(100);
  });
  </code></pre>
  
  <p>Unfortunately, that doesn't work. I don't know how to hide the <code>div</code> correctly when it is dynamically created. Can anybody help me out here?</p>