Question

When I introduce new elements to my slideToggle they look fine and are active (expanded by default) however if I click a pre-existing element all elements collapse and I cannot expand the new ajax elements. Essentially the new ajax elements are not part of the slideToggle group because that was constructed before the elements were introduced. How do I rebuild the toggle on the fly or make the new elements behave as expected?

** jQUERY

$('div.menu_body:eq(0)').show();
$('.acc .head:eq(0)').show().css({color:"#2B6893"});

$(".acc .head").click(function() {  
    $(this).css({color:"#2B6893"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
    $(this).siblings().css({color:"#404040"});
});

** Ajax

<script type="text/javascript">
jQuery(document).ready(function() {
    setInterval("showNewFeeds()", 10000);
});
showNewFeeds() {
    $.ajax({
     type: 'POST',
     url: 'feed.php',
     data : {uid : '145', mid: '22', nid: 56'},
     success: function(response) {
       $('#feedNote').html(response).fadeIn('slow');
     },
     error: function (xhr, ajaxOptions, thrownError) {
       //alert(xhr.status);
       //alert(thrownError);
     }
   });
}
</script>";

** HTML

<div class="widget acc" id="feedNote">
  <div class="head"><h5>Header 1</h5></div>
  <div class="menu_body">
    <div>HTML 1</div>
  </div>
  <div class="head"><h5>Header 2</h5></div>
  <div class="menu_body">
    <div>HTML 2</div>
  </div>
</div>

Answer 1

Try :

$(document).on('click', '.acc .head', function() {  
  $(this).css({color:"#2B6893"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
  $(this).siblings().css({color:"#404040"});
});

instead of .click(function(){...})